如何在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>

在这里，我将放置所有路线输出。我什至还有一个名为demo.ts的组件，需要调用它作为通用组件，因为它具有我的侧边菜单栏。 我的疑问是，我想在所有页面中调用另一个通用组件，例如我如何调用Mainapp。 我该怎么办？有人可以帮助我吗？谢谢。

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;
    }
}