Angular 2 - 独立组件(无布局)
是否可以创建“独立”组件,即没有基本应用程序布局的组件?Angular 2 - 独立组件(无布局)
在我的app.component.html中,我定义了导航,页眉和页脚。但是现在我想要一个使用不同基本布局的登录组件。
我app.component.html看起来是这样的:
<!-- Wrapper-->
<div id="wrapper">
<!-- Left navigation bar -->
<app-navigation></app-navigation>
<!-- Main page wrapper -->
<div id="page-wrapper" class="gray-bg">
<!-- Top navigation -->
<app-topnavbar></app-topnavbar>
<!-- Main view/routes wrapper-->
<router-outlet></router-outlet>
<!-- Footer -->
<app-footer></app-footer>
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
而且我想寄存器和登录组件的路由器出口被包裹在一个布局是这样的:
<!-- Wrapper-->
<div id="wrapper">
<!-- Main view/routes wrapper-->
<router-outlet></router-outlet>
</div>
<!-- End wrapper-->
我怎样才能做到这一点?
如果我理解正确,您目前有一个根应用程序组件,其中包含标题,导航和页脚的组件,每个组件都控制着屏幕的一部分。
您的问题的简短答案是:是的,组件不一定需要包含在根AppComponent中。您可以使用应用程序中的任何位置的路由简单导航到您的LoginComponent。
编辑
你可以为你的“基本的应用程序布局”,一个额外的包装说的BasicAppComponent,其模板具有这样的结构:
<!-- Left navigation bar -->
<app-navigation></app-navigation>
<!-- Main page wrapper -->
<div id="page-wrapper" class="gray-bg">
<!-- Top navigation -->
<app-topnavbar></app-topnavbar>
<!-- Main view/routes wrapper-->
<router-outlet></router-outlet>
<!-- Footer -->
<app-footer></app-footer>
</div>
<!-- End page wrapper-->
然后,在你的根应用程序组件(AppComponent)你会有这样的结构:
<!-- Wrapper-->
<div id="wrapper">
<!-- Main view/routes wrapper-->
<router-outlet></router-outlet>
</div>
<!-- End wrapper-->
此外,您将构建具有所需结构的LoginComponent。 AppComponent的路由器插座将替换为BasicAppComponent或LoginComponent。
是的,但是如何帮助我? 我不只是想导航到我需要一些组件的不同应用程序布局,请参阅我的更新后的问题 – Silthus
我编辑了我的答案,请查看。 –
如何是一个“不同的基地布局”与“组件,而不布局”。没有布局的组件是指令。但是在某些地方,组件是必需的,并且不支持指令(路由中的'component'参数,根组件('NgModule'中的'bootstrap'参数)。 –