如何在Angular2和ng-bootstrap组件的NgbTabSet中访问"select"方法? [英] How can I access the 'select' method from NgbTabSet in the component in Angular2 and ng-bootstrap?

问题描述

使用Angular 2.3.1和ng-bootstrap 1.0.0-alpha.18.我试图以编程方式基于组件而不是模板中的ID选择选项卡.目的是从网址中提取参数，并使用它来选择ngOnInit中的选项卡

Using Angular 2.3.1 and ng-bootstrap 1.0.0-alpha.18. I am trying to programmatically select a tab based on ID from the component rather than from within the template. The goal is to pull the param from the url and to use that to select the tab in ngOnInit

模板

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

这只会产生一个错误:

控制台日志错误

如何访问此方法?

推荐答案

使用Ngb-TabSet路由

在AngularJs 1.x中，使用ui-router设置名称路由很简单.在带有Ng-Bootstrap的Angular 2中，这种情况并不明显.从好的方面来说，您需要的内容可以在本机Angular 2库中找到.

Routing with Ngb-TabSet

In AngularJs 1.x using ui-router setting up names routes was straight forward. In Angular 2 with Ng-Bootstrap it’s not as obvious. On the upside, what you need is available in native Angular 2 libraries.

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的密钥.这是路线的名称.可以将它视为数据包的数据属性.您不仅可以添加路线名称，还可以添加其他内容.

The configuration is straightforward with one exception: the [data] attribute. You’ll notice it has a key called name. This is the name of the route. Think of it as a data attribute as a data-bag. You can add more than just the route 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'})相匹配.

There is nothing magical about the above tab markup, there are couple things you want to take note of: first is in the ngb-tabset element, we’ve declared the variable #tab. We’ll use #tab later in the component. Second, each nbg-tab has an id set that matches name we defined in the route configuration (i.e. 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);
        }
    } 
 }

此练习中最困难的部分是正确确定执行顺序.如果不正确，则在您对集合或属性进行操作之前不会对其进行初始化.我们将从课程的顶部开始，然后逐步进行.

The hardest part in this exercise was getting the order of execution correct. If it’s not correct, a collection or a property won’t be initialized before you operate on it. We’ll start at the top of the class and work our way down.

首先，我们有变量. prospectId是数据的主键，selectedTab是当前选择的选项卡的名称，最后，我们有tabs变量. tabs是对我们添加到ngb-tabset元素的属性(#tab)的引用.

First, we have the variables. prospectId is the primary key of the data, selectedTab is the name of the currently selected tab, and lastly, we have the tabs variable. tabs is a reference to the attribute (#tab) we added to the ngb-tabset element.

下一个是constructor.在文档中看不出来，但是data是Observable<data>.为了捕获该值，我们在路由中订阅了data属性.

Next is the constructor. It’s not obvious in the documentation, but data is an Observable<data>. To capture the value, we are subscribing to the data property from the route.

在constuctor之后是ngOnInit.这对标签并不重要，但它确实捕获了我们在标签的路由中使用的protocolId.如果您的路线中没有任何动态数据，则不需要此数据.

Following the constuctor is the ngOnInit. This isn’t important to the tabs, but it does capture the prospectId which we use in the tab’s routing. If you don’t have any dynamic data in your routes, then you don’t need this.

最后，我们有ngAfterViewChecked.对于路由tabs，这是最重要的.在这里，我们使用从标记中捕获的tabs变量，在该变量中，我们将选定的标签名称传递给tabs来更改选定的标签.

Lastly, we have ngAfterViewChecked. For routing the tabs, this is the most important. Here we use the tabs variable we captured from the markup and it’s where we pass the selected tab name to the tabs to change the selected tab.

要使其正常工作，我必须添加钩子以插入ngb-tabset上的tabChange事件.

To get this working properly, I had to add to hook into the tabChange event on the ngb-tabset.

<ngb-tabset [activeId]="selectedTab" #tabs (tabChange)="onTabChange($event)">

TypeScript:

此外，我还必须在onTabChange函数中对路由进行硬编码.

TypeScript:

Also, I had to hardcode the routes in the onTabChange function.

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

这篇关于如何在Angular2和ng-bootstrap组件的NgbTabSet中访问"select"方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！