компонент маршрутизатора не работает с нг-самозагрузкой

Question

Я пишу ниже кода, чтобы перемещаться между вкладками и

<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> 

Он показывает вкладки, но при щелчке вкладки ни он не направляет к этому компоненту и не дает какую-либо ошибку на консоль. Пожалуйста, помогите

Answer 1

изменения:

<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> 

Наконец, двигаться Router Outlet на приложение компонента и наслаждайтесь;).

Answer 2

Тег template был устаревшим. Это теперь ng-template:

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

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

Answer 3

Чтобы решить эту проблему, щелкает только по названию вызвать изменение контента, вы могли бы использовать из 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.