angular - 如何在Angular2和ng-bootstrap组件的NgbTabSet中访问“select”方法？

使用Angular 2.3.1和NG Bootstrap 1.0.0-Alpha.18。我试图通过编程方式从组件而不是模板中基于id选择一个选项卡。目标是从url中提取参数并使用它在ngonit中选择选项卡
模板

<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');
   }
}

这只会产生一个错误：
Console log errors
如何访问此方法？

最佳答案

带ngb选项卡集的路由
在angularjs 1.x中，使用ui路由器设置名称路由是直接的。在角度2与天然气引导，这不是那么明显。从好的方面来说，您需要的是在Native 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的键。这是路线的名称。将其视为数据包的数据属性。您可以添加的不仅仅是路由名称。
设置选项卡集标记

<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。这对选项卡并不重要，但它确实捕获了我们在选项卡路由中使用的prospectid。如果您的路由中没有任何动态数据，则不需要此。
最后，我们有ngAfterViewChecked。对于路由tabs，这是最重要的。在这里，我们使用从标记捕获的tabs变量，在这里我们将所选选项卡名称传递给tabs来更改所选选项卡。
更新
为了让它正常工作，我必须将hook添加到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]);
}

关于angular - 如何在Angular2和ng-bootstrap组件的NgbTabSet中访问“select”方法？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42446434/