如何加載組件共同在angular2

Question

我module.ts，

@NgModule({ 

    imports:  [ BrowserModule, 
    RouterModule.forRoot([ 
     { path: '', component:AppComponent}, 
     { path: 'login', component:AppComponent} 
    ]) ], 
    declarations: [ AppComponent,Mainapp ], 
    bootstrap: [ Mainapp ] 
}) 
export class AppModule {} 

在module.ts，我自舉Mainapp，其中包含我的出現在每個屏幕共同的背景圖像。

我mainapp.html，

<section id="content" style="background-image: url('assets/images/bg.png');background-size: 100% auto;min-height: 100% !important;"> 
    <div class="content-wrap" [ngClass]="classmap"> 
      <div class="container clearfix"> 
       <div class="row divcenter" style="max-width:966px;background: #FFF;"> 
         <router-outlet></router-outlet> 
       </div> 
      </div> 
    </div> 
</section> 

我在這裏把我所有的航線outputs.I甚至有一個多成分命名demo.ts需要被稱爲一個共同的，因爲它有我的身邊菜單欄。 我的疑問是我想調用另一個組件在所有頁面中都很常見，比如我如何調用Mainapp。我怎麼能做到這一點？任何人都可以幫助我pleae.Thanks。謝謝。

Answer 1

mainApp.component.html：

<my-nav><my-nav> 

    <router-outlet></router-outlet> 

    <my-side-menu></my-side-menu> 
    <my-footer></my-footer> 

並調用mainApp如下：

我-footer.component.ts：

import {MainAppComponent} from 'main-app.component.html'; 
@component({ 
    .... 
}) 
export MyFooterComponent{ 
    parent:any; 
    constructor(public _main:MainAppComponent){ 
     this.parent=_main; 
    } 
}