AngularJS - Удалить пользовательский прослушиватель событий

Question

У меня есть фрагмент кода не AngularJS, который связывается с моими модулями AngularJS через пользовательские события. Каждый из этих модулей AngularJS представляет свой маршрут. Когда я ухожу, каждый маршрут $onDestroy запускается, но не удаляет прослушиватель событий. Чего мне не хватает, чтобы отменить регистрацию моего пользовательского события?

Неангулярный фрагмент HTML HTML

<script>
function sendEvent() {
    const payload = getPayload();
    const event = new CustomEvent('myCustomEvent', { payload });
    window.dispatchEvent(event);
}
</script>

<button onclick="sendEvent()">Send Custom Event</button>

Компонент AngularJS

Class ModuleA {
    $onInit() {
        this.$window.addEventListener('myCustomEvent', this.onCustomEventClick.bind(this));
    }

    $onDestroy() {
        this.$window.removeEventListener('myCustomEvent', this.onCustomEventClick.bind(this), false);
    }
}

Class ModuleB {
    $onInit() {
        this.$window.addEventListener('myCustomEvent', this.onCustomEventClick.bind(this));
    }

    $onDestroy() {
        this.$window.removeEventListener('myCustomEvent', this.onCustomEventClick.bind(this), false);
    }
}

Answer 1

Каждый раз, когда вы вызываете bind, он создает новую функцию и возвращает ее вместо изменения самой функции. Таким образом, четные прослушиватели, которые вы предоставляете addEventListener и removeEventListener, являются разными функциями, поэтому зарегистрированные не удаляются.

Чтобы решить эту проблему, вызовите bind один раз в $onInit и сохраните ссылку на возвращаемую функцию и всегда используйте эту ссылку:

Class ModuleB {
    $onInit() {
        this.onCustomEventClick = this.onCustomEventClick.bind(this)
        this.$window.addEventListener('myCustomEvent', this.onCustomEventClick);
    }

    $onDestroy() {
        this.$window.removeEventListener('myCustomEvent', this.onCustomEventClick, false);
    }
}