我有一个将对象数组渲染为 mat-list-item 的组件。 每个项目都有一个 mat-checkbox、文本,并且还绑定到 routerLink。 当选中复选框时,正在导航该项目,我想阻止这种情况, 这意味着当复选框与导航交互时不会发生。
你可以在复选框上添加点击事件,并像这样阻止
$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
感谢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>