Проблема
В одном из моих компонентов настроена привязка HostListener:
@HostListener('window:resize', ['$event']) callback ($event) {
// D3Js tasks here …
}
В настоящее время, когда прослушиватель вызывается, родительский компонент переоценивает свой шаблон, как если бы родитель действительно ответил на какой-то дочерний output
.
Но выполняемые задачи от прослушивателя не требуют каких-либо обновлений от родительского компонента.
Я хотел бы, чтобы прослушиватель мог выполняться, не вызывая уведомления родительского компонента.
Можно ли предотвратить такое всплывающее поведение где-нибудь в Angular в этом контексте?
Попытки
Ни $event.stopPropagation()
, ни $event.stopImmediatePropagation()
здесь не помогли, вероятно, потому, что это поведение связано с внутренними компонентами Angular.
Если оставить объявление HostListener пустым (закомментировать содержащиеся в нем инструкции), это не изменит ничего, что, по моему мнению, указывает на HostListener. декларация является виновником здесь.
Мое текущее решение состоит в том, чтобы напрямую создать наблюдаемое из собственного события DOM (не полагаясь на Angular) в конструкторе компонента:
this.onResizeSub = Observable
.fromEvent(window, 'resize', null, null)
.subscribe( () => {…});
);
Примечания: используя Angular v4.4.2, повсеместно меняйте стратегию обнаружения OnPush.