在复选框交互时防止导航

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

Answer 2

感谢ashot-aleqsanyan的这篇文章。以下适用于 ionic 复选框，以防止使用 routerlink 在项目中导航。

    <ion-item *ngFor="let task_item of todoTaskList;" routerLink="/todo/task-info/{{task_item.gid}}">
    <ion-checkbox
        slot="start" 
        (click)="$event.stopPropagation()"
        aria-label="Toggle task completion"
        [checked]="task_item.completed"
        (ionChange)="completeTask($event, task_item)">
    </ion-checkbox>
    
    <ion-label class="ion-text-nowrap">
        {{task_item.title}}
    </ion-label>
    
    <ion-note slot="end">
        {{task_item.date_due | date:'dd MMM'}}
    </ion-note>
</ion-item>