角度 - 2 :从 .ts 中的引导选项卡获取活动选项卡

Question

我正在使用基本的引导选项卡，我需要让活动选项卡在.ts中执行功能

代码如下

<li role="presentation" class="active">
  <a href="#daily" aria-controls="daily" role="tab" data-toggle="tab">Daily</a>
</li>
<li role="presentation">
  <a href="#weekly" aria-controls="weekly" role="tab" data-toggle="tab">Weekly</a>
</li>
<li role="presentation">
  <a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab">Monthly</a>
</li>
<li role="presentation">
  <a href="#annual" aria-controls="annual" role="tab" data-toggle="tab">Annual</a>
</li>

Answer 1

您可以使用

TabDirective。只需定义一些函数并像这样调用(select(="newfunction('params'("。

我希望这会有所帮助。

.ts

import {Component} from '@angular/core';
import {TabDirective} from 'ngx-bootstrap';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value: string;
  onSelect(data: TabDirective): void {
    this.value = data.heading;
  }
}

。.html

<div class="mb-3">
  <pre class="card card-block card-header" *ngIf="value">Event select is fired. The heading of the selected tab is: {{value}}</pre>
</div>
<tabset>
  <tab heading="First tab" class="mt-2" (select)="onSelect($event)">
    <h4>First tab</h4>
    <p>First tab context</p>
  </tab>
  <tab heading="Second tab" class="mt-2" (select)="onSelect($event)">
    <h4>Second tab</h4>
    <p>Second tab context</p>
  </tab>
</tabset>