Ответ 1
Маршрутизация с помощью Ngb-TabSet
В AngularJs 1.x с использованием ui-router настройка маршрутов имен была прямой. В Angular 2 с Ng-Bootstrap это не так очевидно. С другой стороны, то, что вам нужно, доступно в родных библиотеках Angular 2.
Настройка конфигурации маршрута
export const appRoutes: Routes =
[
{ path: 'prospect/:prospectid/details', component: ProspectTabsView, data:{name:'details'} },
{ path: 'prospect/:prospectid/appointments', component: ProspectTabsView, data:{name:'appointments'} },
{ path: 'prospect/:prospectid/followups', component: ProspectTabsView, data:{name:'followups'} },
{ path: 'prospect/:prospectid/contacts', component: ProspectTabsView, data:{name:'contacts'} },
{ path: '', component: DashboardView },
{ path: '**', redirectTo: '', pathMatch: 'full'}
];
Конфигурация проста с одним исключением: атрибут [данные]. Вы заметите, что у него есть ключ под названием name. Это название маршрута. Подумайте об этом как атрибуте данных в качестве пакета данных. Вы можете добавить не просто имя маршрута.
Настройка разметки TabSet
<ngb-tabset #tabs>
<ngb-tab id="details">
<ng-template ngbTabTitle>
<a [routerLink]="['/prospect', prospectId, 'details']">Details</a>
</ng-template>
<ng-template ngbTabContent>
</ng-template>
</ngb-tab>
<ngb-tab id="contacts">
<ng-template ngbTabTitle>
<a [routerLink]="['/prospect',prospectId,'contacts']">Contacts</a>
</ng-template>
<ng-template ngbTabContent>
</ng-template>
</ngb-tab>
<ngb-tab id="appointments">
<ng-template ngbTabTitle>
<a [routerLink]="['/prospect', prospectId, 'appointments']">Appointments</a>
</ng-template>
<ng-template ngbTabContent>
</ng-template>
</ngb-tab>
<ngb-tab id="followups">
<ng-template ngbTabTitle>
<a [routerLink]="['/prospect', prospectId, 'followups']">Follow Ups</a>
</ng-template>
<ng-template ngbTabContent>
</ng-template>
</ngb-tab>
</ngb-tabset>
В приведенной выше разметке вкладок нет ничего волшебного, есть пара вещей, которые вы хотите принять к сведению: сначала в элементе ngb-tabset, мы объявили переменную #tab. Хорошо использовать #tab позже в компоненте. Во-вторых, каждый nbg-tab имеет набор id, который соответствует имени, которое мы определили в конфигурации маршрута (т.е. data:{name:'followups'}).
Настройка компонента
import {
AfterViewChecked, Component, OnInit,
ViewChild
} from '@angular/core';
import '../../assets/css/styles.css';
import {ActivatedRoute} from "@angular/router";
import {NgbTabset} from "@ng-bootstrap/ng-bootstrap";
@Component({
templateUrl: './tabs.view.html'
})
export class ProspectTabsView implements OnInit, AfterViewChecked{
prospectId: number;
selectedTab:string;
@ViewChild('tabs')
private tabs:NgbTabset;
constructor(private route: ActivatedRoute) {
this.route.data.subscribe(d=>{
this.selectedTab = d.name;
});
}
ngOnInit(): void {
this.route.params.subscribe(
params => {
this.prospectId = +params['prospectid'];
}
);
}
ngAfterViewChecked(): void {
if(this.tabs) {
this.tabs.select(this.selectedTab);
}
}
}
Самая сложная часть этого упражнения заключалась в правильном выполнении порядка выполнения. Если это неверно, сбор или свойство не будут инициализированы до того, как вы начнете работать с ним. Хорошо начинайте с вершины класса и прокладывайте себе путь.
Во-первых, мы имеем переменные. prospectId является первичным ключом данных, selectedTab - это имя текущей выбранной вкладки, и, наконец, у нас есть переменная tabs. tabs является ссылкой на атрибут (#tab), который мы добавили в элемент ngb-tabset.
Далее находится constructor. Это не очевидно в документации, но data является Observable<data>. Чтобы зафиксировать значение, мы подписываемся на свойство data на маршруте.
Следующим constuctor является ngOnInit. Это не важно для вкладок, но оно захватывает перспективу, которую мы используем в маршрутизации вкладок. Если у вас нет динамических данных на ваших маршрутах, вам это не понадобится.
Наконец, мы имеем ngAfterViewChecked. Для маршрутизации tabs это самое важное. Здесь мы используем переменную tabs, которую мы захватили из разметки, и ее, где мы передаем выбранное имя вкладки в tabs, чтобы изменить выбранную вкладку.
Update
Чтобы это нормально работало, мне пришлось добавить, чтобы подключиться к событию tabChange на ngb-tabset.
HTML:
<ngb-tabset [activeId]="selectedTab" #tabs (tabChange)="onTabChange($event)">
TypeScript:
Кроме того, мне пришлось жестко кодировать маршруты в функции onTabChange.
onTabChange($event: NgbTabChangeEvent) {
let routes = {
details: `/prospect/${this.prospectId}/details`,
appointments: `/prospect/${this.prospectId}/appointments`,
followups: `/prospect/${this.prospectId}/followups`,
notes: `/prospect/${this.prospectId}/notes`,
dials: `/prospect/${this.prospectId}/dials`,
};
this.router.navigateByUrl(routes[$event.nextId]);
}