停止 mat-checkbox 内 mat-select 的事件传播

Question

我的

<mat-select>

里面有一个

<mat-checkbox>

。当

<mat-select>

发生变化时，它也会切换

<mat-checkbox>

，我不希望发生这种情况。

我尝试过使用 '$event.stopPropagation()' 但它不起作用。有什么想法可以解决这个问题吗？

<mat-checkbox [(ngModel)]="myCheckboxModel" (change)="onChangeFunction()">
    <mat-form-field>
        <mat-select [(ngModel)]="mySelectModel">
            <mat-option value="1">1</mat-option>
            <mat-option value="2">2</mat-option>
        </mat-select>
    </mat-form-field>
</mat-checkbox>

Answer 1

我对嵌套

mat-selection-list

项目也有同样的问题。

这对我有用。

selectionChange(event: MatSelectionListChange)
{
    window['event']?.stopPropagation();
}

我今天才发现

window.event

已被弃用，但在这个确切的上下文中，这并不容易，因为 Angular 没有给我们底层事件。

如果您使用 SSR，请确保不要以编程方式调用此函数，因为

window

未定义。

Answer 2

对我来说，添加 (keydown.enter)="$event.preventDefault()"

<mat-checkbox [(ngModel)]="myCheckboxModel (keydown.enter)="$event.preventDefault()">Checkbox Label</mat-checkbox>

Answer 3

它通过防止外部点击事件对我有用

          <mat-form-field [appearance]="'standard'" style="width:240px;margin: 0;" *ngIf="orderItem.orderType === 1" (click)="$event.stopPropagation()">
            <mat-label>{{'sleWebApp.sleOrderReceiving.type'|translate}}</mat-label>
            <mat-select [(ngModel)]="warehouse.saleDeliverType" (selectstart)="$event.stopPropagation();">
              <mat-option *ngFor="let type of saleDeliverTypeList" [value]="type.code">{{type.name}}</mat-option>
            </mat-select>
          </mat-form-field>