Запретить распространение Angular HostListener на родительский компонент

Проблема

В одном из моих компонентов настроена привязка 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.


person Stphane    schedule 09.09.2019    source источник


Ответы (1)


К сожалению, кажется, что в настоящее время это не поддерживается в Angular. Есть запрос на функцию, но, похоже, мы не увидим ее в ближайшее время: https://github.com/angular/angular/issues/9587, https://github.com/angular/angular/issues/10990

Порядок выполнения является отвлекающим маневром — порядок, в котором событие одного и того же элемента распространяется на несколько слушателей, в настоящее время не определен. это в настоящее время по дизайну.

Ваша проблема в том, что событие, доступное слушателям, является реальным событием DOM, и вызов stopImmediatePropagation() для предоставленного события останавливает выполнение других слушателей, зарегистрированных для этого элемента. Однако, поскольку все слушатели, зарегистрированные через Angular, проксируются только одним слушателем dom (по соображениям производительности), вызов stopImmediatePropagation для этого события не имеет никакого эффекта.

person Mark    schedule 09.09.2019