mat-checkbox 在同一次点击中定位两个元素答案

【问题标题】：mat-checkbox targeting both elements on same clickmat-checkbox 在同一次点击中定位两个元素
【发布时间】：2021-12-17 04:27:33
【问题描述】：

我有一个mat-checkbox，它也是移动版的一部分。

当我们有两个独立的部分时，一个用于桌面，另一个用于移动。桌面<mat-checkbox> 可以正确选择和取消选择，而当我们单击移动选项时，会触发桌面版本复选框，而不是仅选择和取消选择移动版本。

如何让<mat-checkbox>分别独立处理两个事件？

HTML：

<div class="class-a">
  <label
    [ngClass]="{'class-b': valueTrigger}">
    <mat-checkbox
      class="checkbox"
      [(ngModel)]="valueTrigger"
      (input)="toggleHasTrigger($event.target.checked)"
      id="test"
      type="checkbox"
      name="testing" ngDefaultControl
    >
      I am here!
    </mat-checkbox>
  </label>
</div>

TS：

initValueTrigger(): void {
    this.valueTrigger = !this.asset.Unchecked;
    this.toggleHasTriggerEvent.emit(this.valueTrigger);
  }
    
toggleHasTrigger(toggleValue: boolean): void {
        this.asset.Unchecked = !toggleValue;
        this.valueTrigger = toggleValue;
        this.toggleHasTriggerEvent.emit(this.valueTrigger);
      }

【问题讨论】：

标签： javascript html css angular angular-material

【解决方案1】：

您可能希望为移动和网络视图的复选框提供单独的 ID

例如：test_web and test_mobile

【讨论】：

【解决方案2】：

在上述答案之后，我使用for 而不是id 为复选框设置单独的ID：

for="test"

【讨论】：