当父级侦听click事件时，复选框在ngTemplateOutlet内部不起作用 - bug？

Question

我一直试图解决这个问题很长一段时间。

基本上，我有一个ng-template，其中包含一个复选框。然后我使用<ng-container *ngTemplateOutlet>将其包含到组件中。 ng-container包含在具有click事件侦听器的div中。听众当前什么都不做，只是一个空函数。

当我跑步时，一切都很好。我可以选中并取消选中该复选框。

这是模板代码：

<div (click)="handleClick($event)">
  <ng-container *ngTemplateOutlet="foo"></ng-container>
</div>

<ng-template #foo>
  <input type="checkbox">
</ng-template>

如果我向context添加ngTemplateOutlet，这会神秘地打破复选框。因此，如果我将模板代码更新为：

<div (click)="handleClick($event)">
  <ng-container *ngTemplateOutlet="foo; context: context"></ng-container>
</div>

<ng-template #foo>
  <input type="checkbox">
</ng-template>

我的组件类中有一个名为context的属性（现在只是一个空对象），当我点击它时，不再检查该复选框。

链接到简单示例可能更容易：

这肯定是导致此问题的context。当我删除context时，该复选框再次有效。

编辑：我忘了提及 - 如果我从包含(click)中删除div侦听器，该复选框也可以正常工作。提供context会以某种方式影响事件的传播吗？

这可能是一个Angular bug吗？或者是否有一些我遗失的概念？

谢谢！

Answer 1

删除get访问器，如trackBy for * ngFor，context应为：

context() {
    return {};
}

DEMO

或将上下文声明为属性：

context = {}

DEMO