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。只需定义一些功能并按此调用（选择）=＆＃34; newfunction（＆＃39; params＆＃39;）＆＃34;

我希望这会有所帮助。

.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>

Angular - 2：从.ts中的bootstrap选项卡获取Active选项卡

1 个答案: