Angular 角度7:EventEmitter对单击事件不起作用

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

因此，我的项目设置如下：

我有一个发票组件，它基本上是一个显示发票的表格。这是一个expande表，因此当单击一行时，它会打开一个包含装运信息的Detailed表。在.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>

到目前为止还不错，控制台记录发票组件：已单击装运，并带有参考

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

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

因此，我在invoice组件中添加了一个eventEmitter：

@Output() click = new EventEmitter();

并在应用程序html文件中添加了一个click函数，我希望将其称为goToOtherTab函数，但它没有：

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

---

有人能给我解释一下为什么这不起作用吗？

问题是我没有将

（shipmentClicked）=“goToOtherTab（$event）”

放在访问事件的正确位置

在特定于事件的组件（在本例中为invoice.component.ts）中添加事件时，需要在parent.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>

---

它起作用了

可能eventEmitter（单击）的名称与dom事件“单击”冲突。。。您是否可以尝试为eventEmitter指定另一个名称（“例如，clickInvoice”）。？请在事件发射器前面加上“on”以防止名称冲突。我已更改了名称，请参阅问题中的“编辑”。但它仍然不起作用，这是另一个问题。在答案中查看我的解决方案！无论如何，谢谢你的提示！

<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>