Question

我有一个非AngularJS代码段，该代码段通过自定义事件与AngularJS模块进行通信。这些AngularJS模块中的每一个都代表一条不同的路线。当我离开时，每条路线$onDestroy都会触发，但不会删除事件监听器。我要取消注册自定义事件会丢失什么？

非AngularJS 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);
    }
}

AngularJS-删除自定义事件侦听器

1 个答案: