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

Question

我有以下 html 代码片段。我正在使用 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

您可以声明 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 2

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

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 3

简单的解决方案：：

像下面那样使用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 4

聚会迟到了，但要使点击事件起作用，必须在 ngb-tabset 上设置（我在您的代码中看不到，通常 bootstrap 标签有该标签）而不是在 ngb 选项卡上 <ngb-tabset type="pills" id="myId" class="myClass" (click)="togglePanel($event)">

Answer 5

在Html中，您必须添加tabChange事件，在ngb-tabset标签中
在事件中设置唯一 ID ngb-tab
在 .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 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

对于Angular11，使用(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>

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

Click listener when tab is clicked - angular2 and ng bootstrap

tabs

ng-bootstrap

angular