单击选项卡时单击侦听器 - angular2 和 ng bootstrap

Question

我有以下html代码sn-p。我正在使用 angular2，ng-bootstrap ng 选项卡。我的问题是单击选项卡时如何调用方法单击？ 我添加了（单击），但是当我单击选项卡时，我看到方法 fetchNews() 根本没有被调用。我究竟做错了什么？

  <ngb-tab title="Active" (click)="fetchNews('active')">
    <ng-template ngbTabContent>
      <table class="table table-sm table-striped">
        <thead>
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Attachment</th>
          <th>Start Date</th>
          <th>End Date</th>
          <th>Actions</th>
        </tr>
        </thead>
        <tr *ngFor="let item of news">
          <td>{{item.title}}</td>
          <td>{{item.description | ellipsis:25}}</td>
          <td>{{item.attachmentUrl | ellipsis:25}}</td>
          <td>{{item.startDate | date: 'MM/dd/yyyy hh:mm a'}}</td>
          <td>{{item.endDate | date: 'MM/dd/yyyy hh:mm a'}}</td>
          <td>
            <button type="button" class="btn btn-secondary btn-sm" (click)="showNewsModal('active',item, true)">
              Modify
            </button>
          </td>
        </tr>
      </table>
    </ng-template>
  </ngb-tab>

Answer 1

以下内容应该每次都能正常工作。

fetchNews(evt: any) {
  console.log(evt); // has nextId that you can check to invoke the desired function
}

<ngb-tabset (tabChange)="fetchNews($event)">
  <ngb-tab title="Active">
    <ng-template ngbTabContent>
      <table class="table table-sm table-striped">
        ...
      </table>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

Answer 2

您可以声明ngbTabTitle 模板并在那里捕获点击事件：

<ngb-tab>
  <ng-template ngbTabTitle>
      <div (click)="fetchNews('active')">Active</div>
  </ng-template>
  <ng-template ngbTabContent>
    <table class="table table-sm table-striped" (click)="fetchNews('active')">
      ...
    </table>
  </ng-template>
<ngb-tab>

Answer 3

1. 在Html中，你必须在ngb-tabset标签中添加tabChange事件
2. 在事件ngb-tab中设置唯一ID
3. 在 .ts 文件中，执行更改选项卡的操作

.html 文件

<ngb-tabset (tabChange)="changeTab($event)">   <- Add Event 
    <ngb-tab [id]="0">                         <- SET ID
        <ng-template ngbTabTitle>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
    <ngb-tab [id]="1">                          <- SET ID
        <ng-template ngbTabTitle>
        </ng-template>
        <ng-template ngbTabContent>
        </ng-template>
    </ngb-tab>
</ngb-tabset>

.ts 文件

changeTab(event) {
    if (event.nextId == '0') {
        // Action for first tab
    }

    else if (event.nextId == '1') {
        // Action for second tab
    }
}

Answer 4

派对迟到了，但要让 click 事件起作用，它必须设置在 ngb-tabset 上（我在你的代码中没有看到，通常引导选项卡有那个标签）而不是 ngb-tab <ngb-tabset type="pills" id="myId" class="myClass" (click)="togglePanel($event)">

Answer 5

简单的解决方案：：

如下所示使用 ngbTabTitle .. 您可以从此处触发事件 如下代码

 <ngb-tabset>
      <ngb-tab  >
          <ng-template ngbTabTitle>
              <div (click)="getTransactionList()">Transactions</div>
          </ng-template>

        <ng-template ngbTabContent >
          <table class="custom-table">
            <thead>
              <tr>
                <th>TransactionID</th>
                <th>Sender</th>
                <th>Recipient</th>
                <th>Time</th>
                <th>Amount</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let Transaction of getTransactions | slice:0:10; let i=index">
                <td>{{Transaction.id}}</td>
                <td>{{Transaction.senderId}}</td>
                <td>{{Transaction.recipientId}}</td>
                <td>{{Transaction.timestamp}}</td>
                <td>{{Transaction.amount}}</td>
              </tr>
            </tbody>
          </table>
        </ng-template>
      </ngb-tab>


      <ngb-tab>
               // your code 
     </ngb-tab>

     <ngb-tab>
               // your code 
     </ngb-tab>

<ngb-tabset>

Answer 6

它是一个简单的 css 技巧，您可以像这样应用。 稍微修改一下user1752112的回答。

<ngb-tab>
  <ng-template ngbTabTitle>
      <div style="padding: 8px 10px;" (click)="fetchNews('active')">Active</div>
  </ng-template>
  <ng-template ngbTabContent>
    <table class="table table-sm table-striped" (click)="fetchNews('active')">
    </table>
  </ng-template>
<ngb-tab>

在你的 css 文件中使用这个。

::ng-deep .nav-tabs .nav-link {
    padding: 0 !important;
}

Answer 7

如果您使用 Angular 6,8。请使用(select)="tabSelected()".

Answer 8

对于 Angular 11，使用 (selectTab)

<tabset>
  <tab (selectTab)="doSomething()">
    <ng-template tabHeading>
      <fa-icon [icon]="['fas', 'copy']"></fa-icon>
    </ng-template>
    <foo1-tab></foo1-tab>
  </tab>
  <tab>
    <ng-template tabHeading>
      <fa-icon [icon]="['fas', 'cogs']"></fa-icon>
    </ng-template>
    <foo2-tab></foo2-tab>
  </tab>
</tabset>