使用 Ngb-TabSet 进行路由
在 AngularJs 1.x 中,使用 ui-router 设置名称路由非常简单。在带有 Ng-Bootstrap 的 Angular 2 中,情况就不那么明显了。从好的方面来说,您需要的东西可以在原生 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'}
];
配置很简单,但有一个例外:[data]属性。你会注意到它有一个名为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
has an 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
is an Observable<data>
。为了获取价值,我们订阅了data
来自路线的属性。
继constuctor
is the ngOnInit
。这对于选项卡来说并不重要,但它确实捕获了我们在选项卡路由中使用的 prospectId。如果您的路线中没有任何动态数据,那么您就不需要这个。
最后,我们有ngAfterViewChecked
。用于路由tabs
,这是最重要的。这里我们使用tabs
我们从标记中捕获的变量,它是我们将选定的选项卡名称传递给tabs
更改选定的选项卡。
Update
为了使其正常工作,我必须添加挂钩到tabChange
事件于ngb-tabset
.
HTML:
<ngb-tabset [activeId]="selectedTab" #tabs (tabChange)="onTabChange($event)">
打字稿:
另外,我必须在 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]);
}