在复选框交互时阻止导航

Question

我有一个组件将对象数组渲染为 mat-list-item。每个项目都有一个 mat-checkbox，文本，它也绑定到 routerLink。选中复选框时，正在导航该项目，我想防止这种情况发生，意思是当复选框与没有导航发生交互时。

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

在复选框交互时阻止导航

Prevent navigation when on checkbox interaction

angular-material

angular

angular9