在复选框交互时阻止导航

Question

我有一个组件将对象数组呈现为 mat-list-item。 每个项目都有一个 mat-checkbox，文本，它还绑定到 routerLink。 当复选框被选中时，项目正在被导航，我想阻止它， 这意味着当复选框与没有导航交互时将发生。

Here is a code example

Answer 1

您可以在复选框上添加点击事件，并像这样阻止$event.stopPropagation()触发的点击事件

<mat-nav-list>
  <mat-list-item *ngFor="let item of entries" routerLink="/person/{{item.PersonId}}">
    <div>
      <mat-checkbox  (click)="$event.stopPropagation()" (change)="onChange()"></mat-checkbox>
      {{item.Name}}
    </div>
  </mat-list-item>
</mat-nav-list>
<app-autocomplete-test></app-autocomplete-test>

演示： https://stackblitz.com/edit/angular-navlistitem-sa23ag-dkhfu4?file=src/app/app.component.html