Angular 2 - 独立组件（无布局）

Question

是否可以创建“独立”组件，即没有基本应用程序布局的组件？

在我的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--> 

我怎样才能做到这一点？

Answer 1

如果我理解正确，您目前有一个根应用程序组件，其中包含标题，导航和页脚的组件，每个组件都控制着屏幕的一部分。

您的问题的简短答案是：是的，组件不一定需要包含在根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。

Answer 2

您需要一台路由器：https://angular.io/docs/ts/latest/guide/router.html 你的主要成分可能是，那么你将使用到康斯坦特巫定义组件加载...