在新模塊中使用角2邊欄

Question

我有一個使用登錄和主頁的Angular 2項目。我一直在複製粘貼邊欄到所有components.html。

有沒有一種方法可以像邊框一樣重新使用組件，並在每次創建新組件或以其他方式調用它時都會調用它？側邊欄的代碼是引擎收錄：Sidebar.html

<!-- ... --> 
    <div class="sidebar-wrapper"> 
     <div class="logo"> 
      <a href="http://www.creative-tim.com" class="simple-text"> 
       Util FAQ 
      </a> 
     </div> 

     <ul class="nav"> 
      <li> 
       <a routerLink = "/home"> 
        <i class="ti-home"></i> 
        <p>Página Principal</p> 
       </a> 
      </li> 
      <li> 
       <a routerLink = "/perfil"> 
        <i class="ti-user"></i> 
        <p>Perfil</p> 
       </a> 
      </li> 
      <li> 
       <a routerLink = "/programas"> 
        <i class="ti-view-list-alt"></i> 
        <p>Programas</p> 
       </a> 
      </li> 
      <li> 
       <a routerLink = "/submissoes"> 
        <i class="ti-text"></i> 
        <p>Submissões</p> 
       </a> 
      </li> 
      <li class="active"> 
       <a routerLink = "/temas"> 
        <i class="ti-package"></i> 
        <p>Temas</p> 
       </a> 
      </li> 
      <li> 
       <a routerLink = "/utilizadores"> 
        <i class="ti-server"></i> 
        <p>Utilizadores</p> 
       </a> 
      </li> 
     </ul> 
    </div> 
    <!-- ... --> 

Answer 1

你要使用多個路由器，網點在app.component像這樣：

<div class="container-fluid grid myappbody"> 
    <!-- Static Nav Bar --> 
    <div class="row mynav"> 
     <router-outlet name="core"></router-outlet> 
    </div> 

    <!-- Static App Area --> 
    <div class="row mymain"> 
    <router-outlet></router-outlet> 
    </div> 

    <!-- Footer Area --> 
    <div class="row myfooter"> 
    <router-outlet name="footer"></router-outlet> 
    </div> 
</div> 

使用路由喜歡...

const routes: Routes = [ 
    { path: 'home', component: CoreComponent, outlet: 'core' }, 
    { path: 'home', component: FooterComponent, outlet: 'footer' }, 
    { path: '', component: CoreComponent, outlet: 'core' }, 
    { path: '', component: FooterComponent, outlet: 'footer' }, 
    { path: 'acct', loadChildren: loadAcctModule }, 
    { path: '', redirectTo: '/acct', pathMatch: 'full' }, 
    { path: '**', redirectTo: '' } 
];