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

我认为上面的代码片段不适用于材料设计。因为我已经检查过了。但是下面的代码与材料设计完美契合

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材料设计mdtabs与路由器

3 个答案: