新しいモジュールの角度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: '' } 
];