Код TypeScript продолжает появляться после запросов на изменение маршрутизатора

Question

У меня есть проект Angular, где одна из страниц содержит:

window.addEventListener('resize', () => {
    let button: HTMLElement = document.querySelector('button#changeDir') as HTMLElement
    ...
})

Когда я пытаюсь изменить каталог с помощью @angular/router и изменить размер окна, я получаю ошибку

ERROR TypeError: Cannot read property 'querySelector' of null

Я пытался сделать оператор if

if (this.router.url == "\") ...

Но если вы go вернетесь на эту страницу, используя @angular/router без обновления, это только добавит рабочей нагрузке, вызывающей действие страницы помедленнее. Есть ли способ игнорировать код, который был принят после / во время смены каталогов?

Answer 1

После небольшого исследования я нашел альтернативу addEventListener, которая не будет задействована после изменения маршрута с помощью @angular/router:

1. Создайте функцию в TypeScript, которая будет выполняться при изменении размера окна :

onWindowResizeFun() {
    let button: HTMLElement = document.querySelector('button#changeDir') as HTMLElement
    ...
}

Добавить к одному из HTML элементов (лучше к самому родительскому элементу):

<section (window:resize)="onWindowResizeFun()">