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 你的主要成分可能是，那麼你將使用到康斯坦特巫定義組件加載...