Angular2材料设计mdtabs与路由器

Question

我无法为路由工作制作标签(来自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'}];

  }
}

现场演示