組件路由器不NG-引導

我寫下面的代碼工作翼片和組件路由器不NG-引導

<ngb-tabset> 
    <ngb-tab title="Add"> 
    <template ngbTabContent routerLink="/retail/retail-add"> 

    </template> 
    </ngb-tab> 
<ngb-tab title="Collection"> 
    <template ngbTabContent routerLink="/retail/retail-collection"> 

     </template> 
    </ngb-tab> 
    <router-outlet></router-outlet> 
</ngb-tabset>

它顯示選項卡之間進行導航，但在標籤的點擊既不據路由到該組件也沒有給出任何錯誤安慰。請幫助

來源

2016-11-15 Karanbeer Kaur

變化：

<ngb-tab title="Add"> 
    <template ngbTabContent routerLink="/retail/retail-add"> 

    </template> 
</ngb-tab>

有了：

<ngb-tab> 
    <template ngbTabTitle> 
    <a routerLink="/retail/retail-add">Add</a> 
    </template> 
    <template ngbTabContent> 

    </template> 
</ngb-tab>

最後，移動路由器出口上的應用程序組件和享受;）。

來源

2017-01-11 13:20:39

嘗試了這種方法（使用_ng-template_而不是_template_）。問題是，當我單擊標籤標題文本時，標籤內容切換工作。當我點擊任何選項卡上，而不是在標題文本，切換的顯示選項卡，但路由不會發生與內容仍然是舊標籤。 – ramtech

的template標籤已被棄用。它現在ng-template：

<ngb-tab> 
    <ng-template ngbTabTitle> 
    <a routerLink="/retail/retail-add">Add</a> 
    </ng-template> 
    <ng-template ngbTabContent> 

    </ng-template> 
</ngb-tab>

來源

2017-05-11 13:23:56 codeMonkeyNut

爲了解決只有點擊標題導致內容的改動問題，你可以利用的tabChange event：

component.html

<ngb-tabset (tabChange)="onTabChange($event)"> 
    <ngb-tab [id]="first" [title]="First"> 
    <ng-template ngbTabContent></ng-template> 
    </ngb-tab> 
    <ngb-tab [id]="second" [title]="Second"> 
    <ng-template ngbTabContent></ng-template> 
    </ngb-tab> 
</ngb-tabset>

component.ts

onTabChange($event: NgbTabChangeEvent) { 
    if ($event.nextId === 'first') { 
    this.router.navigateByUrl(__your_first_url__); 
    } else if ($event.nextId === 'second') { 
    this.router.navigateByUrl(__your_second_url__); 
    } 
}

如目前討論的所有解決方案並沒有真正的樣子最佳實踐，我開了一個issue on GitHub that was added as a feature request。

來源

2017-06-23 09:14:00 tilo

組件路由器不NG-引導

回答

相關問題