如何阻止点击输入框时Angular Material列表的勾选行为

这个问题我之前也碰到过！本质是事件冒泡在搞鬼——你点击输入框的时候，点击事件会顺着DOM树向上传递，触发到父级<mat-list-option>的勾选逻辑，才会出现这种误触发的情况。给你两个简单直接的解决办法：

方法一：在输入框上阻止事件冒泡 #

直接在输入框的click事件里调用$event.stopPropagation()，就能切断事件向上传递的路径，避免触发列表项的勾选状态变化。

举个实际代码例子：

<mat-selection-list>
  <mat-list-option *ngFor="let item of yourItems" [selected]="item.isSelected">
    <!-- 重点就是这行(click)="$event.stopPropagation()" -->
    <input type="text" (click)="$event.stopPropagation()" [(ngModel)]="item.content">
  </mat-list-option>
</mat-selection-list>

方法二：适配Angular Material表单组件 #

如果你的输入框是用<mat-form-field>包裹的Angular Material原生输入组件，同样可以在matInput上添加相同的事件处理：

<mat-selection-list>
  <mat-list-option *ngFor="let item of yourItems" [selected]="item.isSelected">
    <mat-form-field appearance="fill">
      <input matInput (click)="$event.stopPropagation()" [(ngModel)]="item.content">
    </mat-form-field>
  </mat-list-option>
</mat-selection-list>

另外提一句：如果你的列表项里还有其他交互元素（比如按钮、下拉选择框），也可以用同样的方式给它们添加(click)="$event.stopPropagation()"，就能避免误触发列表项的勾选啦！

内容的提问来源于stack exchange，提问作者Md. Samsuzzoha