Angular 7：EventEmitter 对点击事件不起作用答案

【问题标题】：Angular 7: EventEmitter does not work on click eventAngular 7：EventEmitter 对点击事件不起作用
【发布时间】：2020-09-21 14:16:17
【问题描述】：

我想使用 EventEmitter 打开一个新选项卡，并在理想情况下使用单击的引用填充过滤器。

所以我的项目设置如下：

我有一个发票组件，它基本上是一个显示发票的表格。它是一个扩展表，因此当单击一行时，它会打开一个包含装运信息的详细表。在 .html 文件中，我在货件的引用上添加了点击事件：

 <!-- Reference Column -->
      <ng-container matColumnDef="reference">
        <th mat-header-cell *matHeaderCellDef> Shipment </th>
        <td mat-cell *matCellDef="let expandedElement" (click)="applyShipmentFilter()"> {{expandedElement.reference}} </td>
      </ng-container>

此点击事件调用 invoice.ts 文件中的以下函数：

  applyShipmentFilter(){
console.log("INVOICE COMPONENT: Shipment is clicked w/ reference ");
this.click.emit();
}

到目前为止一切顺利，控制台记录 INVOICE COMPONENT: Shipment is clicked w/reference 。

单击引用时，我想确保在 app.component.ts 文件中调用了以下函数：

  public goToOtherTab(){
    console.log("IN APP COMPONENT: tab changed");
    const tabCount = 4;
    this.selectedIndex = (2) % tabCount;
  }

所以我在发票组件中添加了一个 eventEmitter：

@Output() click = new EventEmitter();

并在app html文件中添加了一个click函数，我希望它会调用goToOtherTab函数，但它没有：

 <mat-tab label="Shipment costs"> 
    <app-buyers-console-table (click)="goToOtherTab()"></app-buyers-console-table>
  </mat-tab>

有人可以向我解释为什么这不起作用吗？

【问题讨论】：

可能 eventEmitter (click) 的名称与 dom 事件 'click' 冲突...您可以尝试为 eventEmitter 指定另一个名称（例如，'clickInvoice'）...？
在你的事件发射器前面加上'on'来防止名字冲突。
我已更改名称，请参阅我在问题中的编辑。但是还是不行。
原来是另一个问题。在答案中查看我的解决方案！无论如何感谢您的提示！

标签： angular

【解决方案1】：

问题原来是我没有将(shipmentClicked)="goToOtherTab($event)"放在正确的位置来访问事件。

当您在事件特定组件中添加事件时，在本例中为 invoice.component.ts，您需要在父 .html 中的相同位置访问该事件。

在我的情况下，我没有，首先我是这样放置的：

<mat-tab-group *ngIf="loginService.isUserLoggedIn()" [(selectedIndex)]="selectedIndex">
  <mat-tab label="Invoices"> 
    <app-invoices></app-invoices>
  </mat-tab>
  <mat-tab label="Shipment costs"> 
    <app-buyers-console-table (shipmentClicked)="goToOtherTab($event)"></app-buyers-console-table>
  </mat-tab>
  <mat-tab label="Container costs">
    <app-single-container></app-single-container>
  </mat-tab>
  <mat-tab label="Ratecard">
    <app-ratecard-change></app-ratecard-change>
  </mat-tab>
</mat-tab-group>

这样 app.component 不能访问事件。当我将其更改为：

<mat-tab-group *ngIf="loginService.isUserLoggedIn()" [(selectedIndex)]="selectedIndex">
  <mat-tab label="Invoices"> 
    <app-invoices (shipmentClicked)="goToOtherTab($event)"></app-invoices>
  </mat-tab>
  <mat-tab label="Shipment costs"> 
    <app-buyers-console-table></app-buyers-console-table>
  </mat-tab>
  <mat-tab label="Container costs">
    <app-single-container></app-single-container>
  </mat-tab>
  <mat-tab label="Ratecard">
    <app-ratecard-change></app-ratecard-change>
  </mat-tab>
</mat-tab-group>

有效！

【讨论】：