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路由器

回答

相關問題