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

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

简单解决方案： ：

使用 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 5

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

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()".

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

7 个答案: