在具有 routerLink 的表行中单击按钮时，如何防止导航？答案

【问题标题】：How can I prevent navigation when a button is clicked within a table row that has a routerLink?在具有 routerLink 的表行中单击按钮时，如何防止导航？
【发布时间】：2020-06-13 23:07:54
【问题描述】：

我有一个具有以下结构的角材料表。

<table mat-table [dataSource]="myTable" matSort>
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef>My Column</th>
    <td mat-cell *matCellDef="let row">{{ row.element1 }}</td>
  </ng-container>
  <ng-container matColumnDef="emailButton">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <button mat-mini-fab color="primary" type="button"
        (click)="sendReminder(row)">
        <mat-icon>email</mat-icon>
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="['../edit-data-row', row.dataId]"></tr>
</table>

我希望表格中的任何行都是可点击的，并且用户被路由到 routerLink 指令中定义的路由，并且可以按预期工作。

但是，我有一个按钮在行中单击时，我不希望用户被路由到路由器链接。我只是想让 (click) 事件触发。我已经尝试在我的按钮上使用(click)="$event.preventDefault(); $event.stopPropogation(); sendReminder(row)"，正如我已经进行的研究中提到的那样，但这似乎不起作用。

我还看到我可以添加一个指令来阻止路由器导航。对此有何想法？

最后，我还看到了一个向表格行添加点击处理程序的实例。但我想我会遇到同样的问题。想法？

【问题讨论】：

标签： angular angular-routing angular-routerlink

【解决方案1】：

您可以尝试使用布尔标志来控制路由器端点。如果您不想重定向到任何地方，请路由到[]。它不会改变终点。

控制器

disableRoute = false;

模板

<table mat-table [dataSource]="myTable" matSort>
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef>My Column</th>
    <td mat-cell *matCellDef="let row">{{ row.element1 }}</td>
  </ng-container>
  <ng-container matColumnDef="emailButton">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <button mat-mini-fab color="primary" type="button"
        (click)="sendReminder(row); disableRoute = true">    <!-- set boolean here -->
        <mat-icon>email</mat-icon>
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="disableRoute ? [] : ['../edit-data-row', row.dataId]"></tr>
</table>

【讨论】：

这绝对有效，我现在会使用它，但我真的希望我可以在更可重用的东西中重复这个逻辑，比如把它扔进一个可以附加到多个元素的指令中.
我不确定，因为条件是动态的，取决于按钮点击之类的东西。

【解决方案2】：

试试stopImmediatePropagation，它对我有用。

<table mat-table [dataSource]="myTable" matSort>
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef>My Column</th>
    <td mat-cell *matCellDef="let row">{{ row.element1 }}</td>
  </ng-container>
  <ng-container matColumnDef="emailButton">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let row">
      <button mat-mini-fab color="primary" type="button"
        (click)="sendReminder($event, row)">
        <mat-icon>email</mat-icon>
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="['../edit-data-row', row.dataId]"></tr>
</table>

sendReminder(e: MouseEvent, row) {
    e.stopImmediatePropagation();
    console.log(row);
}

【讨论】：