如何使用angular2創建頁眉和側欄在單個頁面中

Question

我使用Angular 2單獨創建了頁眉和側欄。我想將它們集成爲一個單獨的一個。我想在一個頁面中創建它們。

Answer 1

具有標題菜單欄下面

import {Component} from '@angular/core'; 

@Component({ 
    selector:'header-bar', 
    template: ` 
     <nav class="navbar navbar-inverse"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       .......... 
      </div> 
     </nav> 

    ` 


}) 
export class HeaderBarComponent{ 


} 

擁有側欄，如下

import {Component} from '@angular/core'; 

@Component({ 
    selector:'side-bar', 
    template: ` 
     <div> 
      ................. 
     </div> 

    ` 


}) 
export class SideBarComponent{ 


} 

你AppComponent應該有

import {Component} from '@angular/core'; 

@Component({ 
    selector:'app', 
    template: ` 
     <div class="row"> 
      <div class="col-md-12"> 
        <header-bar> </header-bar> 
      </div>    
     </div> 
     <div class="row"> 
      <div class="col-md-3"> 
        <side-bar> </side-bar> 
      </div>    
      <div class="col-md-3"> 
        ..main content goes here 
        <router-outlet> </router-outlet> 
      </div>    
     </div> 

    ` 


}) 
export class AppComponent{ 


} 

Answer 2

1. 創建導航欄組件（NavbarComponent）選擇器：'navbar'
2. 創建側邊欄組件（SidebarComponent），選擇： '側邊欄'

3. 在你app.html：

   <div class="row"> 
       <navbar> </navbar>    
   </div> 
   <div class="row"> 
       <div class="col-md-3"> 
         <sidebar> </sidebar> 
       </div>    
       <div class="col-md-9"> 
         <router-outlet> </router-outlet> 
       </div>    
   </div> 
   

4. 你需要在聲明添加到您的app.module新的組件。

   declarations: [NavbarComponent, SidebarComponent],