Angular 2 Checkbox preventDefault答案

【问题标题】：Angular 2 Checkbox preventDefaultAngular 2 Checkbox preventDefault
【发布时间】：2016-07-01 06:39:12
【问题描述】：

我正在制作一个 Bootstrap 复选框下拉菜单，选项包含在处理点击的 <a> 标记中，但我在 a 标记内也有一个 <input type="checkbox">。

当用户按下实际的复选框而不仅仅是<a> 元素时，就会出现我的问题。两者都被点击并且发生了一些冲突。复选框的选中状态应该反转，但不是。

在 Angular1 中，它仅在复选框单击时使用 preventDefault()，但在我的 angular2-test 中，它会阻止复选框更新其状态。

我做错了什么需要帮助。

<ul>
    <li *ngFor="#option of options">
    <a href="" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
        <input type="checkbox" [checked]="isSelected(option)" (click)="checkboxClick($event)" /> {{ option.name }}
    </a>
  </ul>

Plunker：https://plnkr.co/edit/6D5GQ9mnaMALNnPzf5Na

我希望单击复选框时的行为与单击右侧的链接相同。

【问题讨论】：

标签： checkbox angular

【解决方案1】：

只需将;false 添加到事件处理程序表达式即可。在preventDefault() 中返回错误结果

<input type="checkbox" [checked]="isSelected(option)" (click)="checkboxClick($event);false" /> {{ option.name }}

如果你在checkboxClick()中返回false，你会得到同样的效果

【讨论】：

我以为preventDefault在angular2中是默认的，不是吗？
这条评论 github.com/angular/angular/issues/7277#issuecomment-188938815 写给你 :D 说“@eesdil atm，我们在每个被分派到 WebWorker 的事件上都阻止默认值。但我不相信我们会停止传播。” => 被分派到 WebWorker 的事件
是的，我明白了，没错。还检查了源代码，他们正在检查回调的返回值而不是更改它。记忆...

【解决方案2】：

为什么不使用event.stopPropagation()？它正在停止单击以从复选框传播到单击处理程序...

【讨论】：

【解决方案3】：

你应该检查一下。

https://plnkr.co/edit/jyX1hGNlRk0dNsR0XMXU?p=preview

<ul>
    <li *ngFor="#option of options">
            <a href="#" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
            <input type="checkbox" [checked]="isSelected(option)" (keyup)="checkboxClick($event)" /> {{ option.name }}
            </a>
     </li>
</ul>

【讨论】：

是的。谢谢你。所以我想解决方案是从