Angular2材料设计与mdtabs路由器

我不能为路由的工作使标签（from angular material 2 docs）：Angular2材料设计与mdtabs路由器

组件：

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>

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

来源

2017-03-04 Anton Arsentyev

您对此有何期待？我也尝试过这种类似的方法，但是失败了，所以以不同的方式修复它。所以我可以帮你在这 – Aravind

@Aravind的期望是有选项卡导航通过应用程序，我有两个组件映射到['/组'，'/对象]，有链接和标签为他们，不知道如何运行它;）。解决方法是使用我自己的风格的标签ofc） –

在两个标签中的两个组件，你可以通过你的路由URL在它们之间导航？正确？ – Aravind

它完美罚款下面的代码

<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

来源

2017-03-05 11:34:08 Aravind

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

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>

来源

2017-07-11 06:03:09

这将工作时，手动点击标签，但失败时，用户试图击中浏览器返回按钮。它不会突出显示之前选择的后退单击标签。 – Aniket

在你的代码演示例子应该改变一点点，也能工作：

<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'} 
    ]; 
...

来源

2017-09-01 21:47:19 Svetlana

Angular2材料设计与mdtabs路由器

回答

相关问题