Обработчик событий щелчка Angular не срабатывает при изменении стиля содержащего элемента с display: none на display:blo ⇐ CSS

[Anonymous]

У меня возникла проблема: обработчик событий щелчка не срабатывает, когда содержащий его элемент div изначально был скрыт, а затем отображен. Приведенный ниже код — Angular, но я не уверен, что это проблема Angular.
ParentComponent.ts

Код: Выделить всё

@Component({
selector: "parent",
template: `
Click Here!



`,
styles: [`
.container {
display: none;
}
.show .container {
display: block;
}
`]
})
export class ParentComponent {
@HostBinding("class.show") show = false;
showChildren(): void {
this.show = true;
}
}

ChildComponent.ts:

Код: Выделить всё

@Component({
selector: "child",
template: ""
})
export class ChildComponent.ts {
@HostListener("click")
clickMe(): void {
/* This event is never captured */
}
}

Использование:

Код: Выделить всё

Child 1
Child 2
Child 3

Визуализированный вывод:

Код: Выделить всё

Click Here!

Child 1
Child 2
Child 3

Вот что происходит:

• Когда страница впервые отображается, элемент div с классом «контейнер» изначально скрыто, поскольку для параметра display установлено значение none
• Затем пользователь нажимает «Нажмите здесь!» и класс «show» добавляется в родительский div. Это изменит отображение в контейнере на блокировку.

До этого момента все работает правильно. Контейнер div отображается, отображаются дочерние элементы.
Вот проблема: Обработчики кликов на дочерних элементах не срабатывают. Если дочерние элементы изначально отображаются с помощью display:block;, обработчики кликов работают правильно. Они не работают только тогда, когда содержащий div сначала скрыт, а затем отображается.
Есть идеи, почему? Любая помощь приветствуется.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ment-style