Question

在垫子复选框标签内进行垫子选择很棘手：如果单击垫子选择，复选框也会被切换。我不希望发生这种情况...

我尝试将选择从复选框中移出，但是很难在一行上很好地显示两个。我也将select替换为mat-select。这有效，但不够完美。（例如，如果我想进行多项选择）。

这是一个有效的示例：https://angular-7em9xn.stackblitz.io

，代码为https://stackblitz.com/edit/angular-7em9xn

Answer 1

添加指令（click-stop-propagation.directive.ts）

@Directive({
  selector: '[appClickStopPropagation]',
})
export class ClickStopPropagationDirective {
  @HostListener('click', ['$event'])
  public onClick(event: any): void {
    event.stopPropagation();
    event.preventDefault();
  }
}

并在垫选上使用它

<mat-checkbox>Check this out! 
  <mat-select [(ngModel)]='when' appClickStopPropagation>
    <mat-option value="now">now</mat-option>
    <mat-option value="later">later</mat-option>
  </mat-select>
</mat-checkbox>

event.stopPropagation();出于某种原因应该足够。

垫子中的嵌套垫子选择复选框恶作剧

1 个答案: