如何为 Angular 8 中的选项卡编写点击事件答案

【问题标题】：How to write click event for tab in angular 8如何为 Angular 8 中的选项卡编写点击事件
【发布时间】：2020-01-31 18:51:42
【问题描述】：

尝试为标签编写点击事件但不工作。如何编写？如果我单击选项卡，我想调用一个函数。那么如何将 selectedtabclick 单击事件设置为选项卡组件。如果有人知道，请帮助找到解决方案。

app.component.html：

  <my-tabs>
  <my-tab [tabTitle]="'Tab 1'" (selectedtabclick)="test($event)">
    Tab 1 content
  </my-tab>
  <my-tab tabTitle="Tab 2" (selectedtabclick)="test($event)">
    Tab 2 content
  </my-tab>
  </my-tabs>

演示：https://stackblitz.com/edit/angular-tabs-example-j9ot7z?file=app/app.component.html

【问题讨论】：

标签： typescript angular7 angular8

【解决方案1】：

您需要在 Tab 或 Tabs 组件中发出 EventEmitter。从选项卡组件中执行此操作似乎最容易，而且您不必复制太多标记。您将在下面找到一个示例（您的一些代码已被省略）和一个堆栈闪电战。

App.component.html

<my-tabs (selectedTabClick)="test($event)"> <! –– This is your Angular event. ––>
  <my-tab [tabTitle]="'Tab 1'" >
    Tab 1 content
  </my-tab>
  <my-tab tabTitle="Tab 2">
    Tab 2 content
  </my-tab>
</my-tabs>

// app.component.ts
...
selectedTabClick($event) {
  console.log($event.tab.elRef);
}

Tabs.component.ts

@Component({
  selector: 'my-tabs',
  template: `
    <ul class="nav nav-tabs">
      <li *ngFor="let tab of tabs" (click)="selectTab(tab)"></li>
    </ul>
    <ng-content></ng-content>
  `
})
export class TabsComponent implements AfterContentInit {
  @Output() selectedTabClick = new EventEmitter();

  selectTab(tab: Tab){
    ...

    // emit event to fire "callback" in the app.component.html
    this.selectedTabClick.emit({tab});
  }
}

Tab.component.ts

export class TabComponent {

  // Inject the elRef and the constructor and assign it as a public property
  constructor(public elRef: ElementRef){
  }
}

这是一个（更新的）stackblitz，带有工作示例：https://stackblitz.com/edit/angular-tabs-example-uavrd8?file=app%2Ftabs%2Ftab.component.ts

【讨论】：

如何获取选中标签的id和元素引用？ stackblitz.com/edit/angular-tabs-example-bnq7es?file=app/…
您可以将选项卡组件作为参数传递给事件发射器。如果需要标签组件的元素引用，可以将元素引用注入到标签组件中，并将其作为公共属性访问。我已经更新了上面的例子和你的 stackblitz：stackblitz.com/edit/…
检查我的更新、答案和 stackblitz。当我回复并写下错误答案并且没有保存stackblitz时已经很晚了。