Angular2 - 初始化Tab中的所有组件

时间:2017-06-16 15:27:30

标签: angular typescript angular2-routing

我有一个包含Tabbed结构的视图。选项卡有一个路由器链接,使用routerLink进行导航。但是,如果我导航到其中一个选项卡,则只初始化特定组件。如何让选项卡中的所有组件都具有名为的构造函数。

父模板:

    <nav>
        <a *ngFor="let tab of tabs" routerLink="{{tab.routerLink}}" routerLinkActive="{{tab.routerLinkActive}}">{{tab.displayText}}</a>
    </nav>
    <router-outlet></router-outlet>

父组件:

    loadTabs() {
        this.tabs = [
          {
            routerLink: "/sample/summary/",
            routerLinkActive: "active",
            class: "active",
            displayText: "Summary"
          },
          {
            routerLink: "/sample/details/",
            routerLinkActive: "active",
            class: "active",
            displayText: "Details"
          }
        ]
      }

app.routing.ts

    export const routes: Routes = [
      {
        path: '',
        component: HomeComponent,
        children: [
          {
            path: 'sample',
            component: SampleComponent,
            children: [
              { path: '', redirectTo: 'summary', pathMatch: 'full' },
              { path: 'summary', component: SummaryComponent },
              { path: 'details', component: DetailsComponent }
              ]
          }
        ]
      }
    ]

当我导航到\sample\summary时,SampleComponentSummaryComponent已初始化,但DetailsComponent未启动。当我使用当前设置导航DetailsComponent时,有没有办法初始化\sample\summary

0 个答案:

没有答案