带路由器的 Angular2 Material 设计 mdtabs

Question

我无法为路由工作制作标签 ( from angular material 2 docs ):

组件:

export class AppComponent {
  navLinks: [
    '/groups',
    '/objects'
  ]
}

html:

<nav md-tab-nav-bar>
  <a md-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{tabLink.label}}
  </a>
</nav>

<router-outlet></router-outlet>

日志中没有错误可能很明显，但仍然...

Answer 1

下面的代码可以正常工作

<nav md-tab-nav-bar aria-label="weather navigation links">
    <a md-tab-link
        *ngFor="let routeLink of routeLinks; let i = index"
         [routerLink]="routeLink.link"
         [active]="activeLinkIndex === i"
         (click)="activeLinkIndex = i">
         {{routeLink.label}}
     </a>
</nav>
<router-outlet></router-outlet>

我的组件代码看起来像，

export class App {
  routeLinks:any[];
  activeLinkIndex = 0;
  constructor(private router: Router) {
    this.routeLinks = [
    {label: 'Welcome', link: 'welcome'},
    {label: 'Home', link: 'home'}];

  }
}

LIVE DEMO