Флажок не работает внутри ngTemplateOutlet, когда родитель прослушивает событие click - ошибка?

1

Я уже давно пытаюсь понять это.

В принципе, у меня есть 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 каким-то образом повлиять на распространение событий?

Может ли это быть угловой ошибкой? Или есть какая-то концепция, которую я пропускаю?

Спасибо!

  • 0
    Я думаю, потому что вы установили пустой контекст.
  • 0
    @Vega, даже если я добавляю данные в контекст, я все равно получаю такое же поведение.
Теги:
angular
checkbox

1 ответ

1
Лучший ответ

Удалите get accessor, например trackBy для * ngFor, контекст должен быть:

context() {
    return {};
}

DEMO

или объявить контекст как свойство:

context = {}

DEMO

Ещё вопросы

Сообщество Overcoder
Наверх
Меню