模板
<section id="policy-terms">
<ngb-tabset>
<ngb-tab title="Terms and Privacy" id="terms">
<template ngbTabContent>
<div class="container page-content">
</div>
</template>
</ngb-tab>
<ngb-tab title="Company Policy" id="policy">
<template ngbTabContent>
<div class="container page-content">
</div>
</template>
</ngb-tab>
</ngb-tabset>
</section>
和组件代码：
import { Component,OnInit } from '@angular/core';
import { NgbTabset } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-policy-terms',templateUrl: './policy-terms.component.html',styleUrls: ['./policy-terms.component.scss'],providers: [
NgbTabset
]
})
export class PolicyTermsComponent implements OnInit {
constructor(
public tabset: NgbTabset
) { }
ngOnInit() {
this.tabset.select('policy');
}
}
这只会产生一个错误：
我该如何访问此方法？
在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',data:{name:'appointments'} },{ path: 'prospect/:prospectid/followups',data:{name:'followups'} },{ path: 'prospect/:prospectid/contacts',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','contacts']">Contacts</a>
</ng-template>
<ng-template ngbTabContent>
</ng-template>
</ngb-tab>
<ngb-tab id="appointments">
<ng-template ngbTabTitle>
<a [routerLink]="['/prospect','appointments']">Appointments</a>
</ng-template>
<ng-template ngbTabContent>
</ng-template>
</ngb-tab>
<ngb-tab id="followups">
<ng-template ngbTabTitle>
<a [routerLink]="['/prospect','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是对我们添加到ngb-tabset元素的属性(#tab)的引用.
接下来是构造函数.它在文档中并不明显,但数据是Observable< data>.要捕获该值,我们将订阅路由中的data属性.
构造函数之后是ngOnInit.这对选项卡并不重要,但它确实捕获了我们在选项卡路由中使用的prospectId.如果您的路线中没有任何动态数据,那么您不需要这样.
最后,我们有ngAfterViewChecked.对于路由选项卡,这是最重要的.这里我们使用从标记中捕获的tabs变量,然后我们将选定的选项卡名称传递给选项卡以更改选定的选项卡.
更新
为了使其正常工作,我不得不添加钩子到ngb-tabset上的tabChange事件.
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]);
}
