Я уже давно пытаюсь понять это.
В принципе, у меня есть ng-template
, содержащий один флажок. Затем я включаю это в компонент с помощью <ng-container *ngTemplateOutlet>
. ng-container
содержится внутри 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
в моем классе компонента (только пустой объект на данный момент), флажок больше не проверяется, когда я нажимаю на него.
Вероятно, было бы проще просто связать с простым примером:
https://plnkr.co/edit/LHxdP3XBifuYbgmo3ptm
Это определенно context
который вызывает эту проблему. Когда я удаляю context
, флажок работает снова.
EDIT: Я забыл упомянуть - если я удаляю (click)
прослушиватель из содержащего div
, флажок работает правильно. Может ли context
каким-то образом повлиять на распространение событий?
Может ли это быть угловой ошибкой? Или есть какая-то концепция, которую я пропускаю?
Спасибо!