javascript - 单击 Angular 5 时停止执行其他函数

Question

我有一个 Angular Material 表，单击时每个表行都会展开

在最后一个单元格中，我使用 ComponentFactory 动态加载组件，加载的组件是一个下拉列表。

我遇到的问题是，当单击下拉菜单时，表格行将扩展和收缩。

这就是我向行添加功能的方法

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;let index=index" (click)="expandRow(index, row)" #myRow></mat-row>

这是加载用户侧菜单的单元格:

  <ng-container *ngIf="column === 'viewSelection'">
    <ng-container matColumnDef="viewSelection">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let row">
        <ng-container #sideMenu></ng-container>
        <!-- <user-side-menu></user-side-menu> -->
      </mat-cell>
    </ng-container>
  </ng-container>

如何加载用户菜单，效果很好:

  let sideMenu = this.sideMenu.toArray()
      for (let i = 0; i < sideMenu.length; i++) {
        const factory = this.resolver.resolveComponentFactory(this.ellipsis);
        let container = this.sideMenu.toArray()[i]

        const ellipsisComponent = container.createComponent(factory);
        ellipsisComponent.instance.data = this.returnedData[i]
        console.log(container, ellipsisComponent.data);

加载用户菜单的 Html:

<a aria-expanded="false" aria-haspopup="true" class="btn btn-icon has-dropdown" data-toggle="dropdown" id="grid-menu">
  <i class="ion-more"></i>
</a>
<div class="c-dropdown__menu dropdown-menu" aria-labelledby="grid-menu">
  <a class="c-dropdown__item dropdown-item" (click)="viewUser({Id:data?.Id}, $event);  $event.preventDefault()" >View/Edit User</a>
  <a *ngIf="data?.IsActive" class="c-dropdown__item dropdown-item" (click)="activeDeactivateUser(data?.Id, false);  $event.preventDefault()" data-toggle="modal" data-target="#deactivate-member">Deactivate User</a>
  <a *ngIf="!data?.IsActive" class="c-dropdown__item dropdown-item" (click)="activeDeactivateUser(data?.Id, true);  $event.preventDefault()" data-toggle="modal" data-target="#activate-member">Activate User</a>
</div>

正如你所看到的，我正在使用阻止默认值，这没有任何作用，已经尝试过 停止传播，但这会阻止我想要执行的函数执行

希望有人能指出我正确的方向

Answer 1

您需要使用stopPropagation()来阻止事件传递到父DOM。您可以使用 preventDefault() 来阻止对事件对象执行默认事件操作。例如，对于 anchor 元素，默认的单击操作是打开链接，因此如果您想实现特殊检查以防止在特定条件下打开链接，您可以使用 preventDefault( ) 从 (click) 回调函数中执行此操作。但如果你想阻止点击事件传递给父元素，你可以使用 stopPropagation():

<span onclick="alert('You've already visited Stack Overflow')">
    <a href="https://stackoverflow.com" (click)="visitStack($event)">
        Stack Overflow
    </a>
</span>

stackVisited = false;
visitStack(event) {
    if (this.stackVisited) {
        event.preventDefault();
    } else {
        this.stackVisited = true;
        event.stopPropagation();
    }
}