如何解决复选框交互时阻止导航
我有一个组件,将对象数组呈现为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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。