围绕div单击的角度材质复选框

Posted 2023-02-18

【中文标题】围绕div单击的角度材质复选框

【英文标题】：angular material checkbox surrounding div click

【发布时间】：2018-08-24 08:09:21

【问题描述】：

我有一个angular 5 material checkbox，周围有一个 div 和一些其他元素。我希望点击div 与直接点击checkbox 上的click 相同。

这是我的示例代码：

<div (click)="checked = !checked">
  <mat-checkbox class="example-margin" [(ngModel)]="checked">
                I'm a not working checkbox :'(                  
  </mat-checkbox>
  <span style="background-color: #dddd00;">I want to be clickable too</span>
</div>

还有一个Stackblitz

目前单击复选框本身不起作用，单击 div 外部有效。有什么想法吗？

【问题讨论】：

如何在 Stackblitz 上进行保存 ..好像没有保存我的代码

按叉子按钮。

你可以尝试在 ngModel 周围删除 ()...

这样有效吗？？

然后试试这个，它的工作原理：stackblitz.com/edit/angular-hyvsxv-teyv7t?file=app/…

【参考方案1】：

这里的问题是div 上的Click 事件和复选框上的[(ngModel)] 都相互无效，这就是它不起作用的原因。

当你点击 div 元素时，你需要 stopPropagation 让它工作。所以我从 div click 事件中做了如下代码returning false 停止它，你的代码就可以工作了。

Working Demo

组件.ts

export class CheckboxConfigurableExample 
  checked = false;
  indeterminate = false;
  align = 'start';
  disabled = false;

  onChecked() 
  this.checked= !this.checked;
  return false;
  

component.thml

<mat-card class="result">
    <mat-card-content>
        <h2 class="example-h2">Result</h2>
        <section class="example-section">
            <div (click)="onChecked();">
                <mat-checkbox class="example-margin" [(ngModel)]="checked">
          not working checkbox :'( 
                </mat-checkbox>
        <span  style="background-color: #dddd00;">I want to be clickable too</span>
       </div> 

        </section>
    </mat-card-content>
</mat-card>

【讨论】：

抱歉，我看不出这对我的问题有什么帮助。我知道如何使用复选框；）

现在您无法选中该复选框。仅当您单击“我也想成为可单击的”部分时。 Stackblitz

【参考方案2】：

你也可以这样做

<div (click)="checked = !checked">
  <mat-checkbox class="example-margin" [(ngModel)]="checked" (click)="$event.stopPropagation()">
    I'm a not working checkbox :'(
  </mat-checkbox>
  <span style="background-color: #dddd00;">I want to be clickable too</span>
</div>