组件路由器不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-引导

回答

相关问题