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

Answer 2

我认为以上代码片段不适用于 material 设计。因为我已经检查过了。但下面的代码与 material design

完美配合

import { Router } from "@angular/router";

constructur(router:Router){}

public selectedTab(e) {
        switch (e.index) {
        case 0:
            this.router.navigateByUrl('/');
            break;
        case 1:
            this.router.navigateByUrl('/contact');
            break;
        case 2:
            this.router.navigateByUrl('/about');
            break;

        default:
            console.log('material-design-mdtabs-with-router');
            break;
        }
    }

<md-tab-group (focusChange)="selectedTab($event)">
            <md-tab>
                <template md-tab-label>
                    Home
                </template>
            </md-tab>
            <md-tab>
                    <template md-tab-label>
                        Contact
                    </template>
                </md-tab>
                <md-tab>
                    <template md-tab-label>
                        About
                    </template>
                </md-tab>
            </md-tab-group>

<router-outlet></router-outlet>

Answer 3

您代码中的演示示例应该稍微更改一下，也可以正常工作：

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

并在控制器中定义 tabLinks:

export class AppComponent {
  tabLinks = [
    {label: 'Groups', link: '/groups'},
    {label: 'Objects', link: '/objects'}
  ]; 
...

Angular2 material 用路由器设计 mdtabs

Angular2 material design mdtabs with router

angular2-routing

angular-material2

angular