当父级侦听单击事件时，复选框在 ngTemplateOutlet 内不起作用 - 错误？

Question

I've been trying to figure this out for quite a while now.

Basically, I have a ng-template that contains a single checkbox. I then include that into a component by using <ng-container *ngTemplateOutlet> . The ng-container is contained inside a div that has a click event listener. The listener does nothing currently, just an empty function.

When I run this, everything's good. I can check and uncheck the checkbox.

Here's the template code:

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

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

If I add a context to the ngTemplateOutlet , though, this mysteriously breaks the checkbox. So, if I update the template code to this:

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

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

and I have a property called context in my component class (just an empty object for now), the checkbox no longer gets checked when I click on it.

It would probably be easier just to link to the simple example:

https://plnkr.co/edit/LHxdP3XBifuYbgmo3ptm

It's definitely the context that is causing this issue. When I remove the context , the checkbox works again.

EDIT: I forgot to mention - if I remove the (click) listener from the containing div , the checkbox works correctly as well. Could providing a context affect the propagation of events somehow?

Could this be an Angular bug? Or is there some concept I'm missing?

Thanks!

Answer 1

Remove the get accessor, like trackBy for *ngFor, context should be:

context() {
    return {};
}

DEMO

or declare context as a property:

context = {}

DEMO