代码之家 › 专栏 › 技术社区 › Omar

javascript removeEventListener OnDestroy不在Angular 6中工作

angular-routing typescript angular

0

Omar · 技术社区 · 7 年前

我正在努力 removeEventListener 在我的角度补偿中: Javascript removeEventListener not working

    ...
    ngOnInit() {
        document.addEventListener('visibilitychange', () =>this.handleVisibleState(), true);
    }

    ngOnDestroy() {
        document.removeEventListener('visibilitychange', () => this.handleVisibleState(), true);
    }

    handleVisibleState() {
        let vis = document.visibilityState === 'visible';
        this.configsService.update_collab_visible(vis);
    }
    ...

与上述 addEventListener 即使在之后也能工作 ngOnDestroy ()

如何取消角度组件中文档的可见性状态绑定?

尝试2

    private visibilityChangeCallback: () => void;

    ngOnInit() {
        this.visibilityChangeCallback = () => this.handleVisibleState();
        document.addEventListener('visibilitychange', this.handleVisibleState, true);
    }

    ngOnDestroy() {
        document.removeEventListener('visibilitychange', this.handleVisibleState, true);
    }

    handleVisibleState() {
        let vis = document.visibilityState === 'visible';
        console.log(typeof this.configsService); // undefined
        this.configsService.update_collab_visible(vis);
    }

结果:

错误类型错误:无法读取未定义的“更新协作可见”属性

4 回复 | 直到 7 年前

1

Frank Modica 7 年前

存储回调:

private visibilityChangeCallback: () => void;

ngOnInit() {
    this.visibilityChangeCallback = () => this.handleVisibleState();
    document.addEventListener('visibilitychange', this.visibilityChangeCallback, true);
}

ngOnDestroy() {
    document.removeEventListener('visibilitychange', this.visibilityChangeCallback, true);
}

2

Poul Kruijt 7 年前

您必须使函数成为带有箭头函数的类的属性字段,而不是使用匿名函数,因为函数引用将不相同。

你得到的原因 Cannot read property 'update_collab_visible' of undefined 错误是因为您使用的是类函数而不是类字段。这将移动 this 函数的上下文,这不是您想要的:

ngOnInit() {
    document.addEventListener('visibilitychange', this.handleVisibleState, true);
}

ngOnDestroy() {
    document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}

handleVisibleState = () => {
    let vis = document.visibilityState === 'visible';
    this.configsService.update_collab_visible(vis);
};

还有其他选择。我看到你想使用捕获标志来处理这个事件。您也可以考虑使用RXJS库:

destroy = new Subject<void>();

ngOnInit() {
  fromEvent(document, 'visibilitychange', true).pipe(
    takeUntil(this.destroy)
  ).subscribe((event) => this.handleVisibleState(event));
}

ngOnDestroy() {
  this.destroy.next();
  this.destroy.complete();
}

还有一个角度库,它将功能添加到模板和组件事件绑定中,称为 ng-event-options . 如果您已经安装/导入了它,您只需使用:

@HostListener('document:visibilitystate.c')
handleVisibleState() {
    let vis = document.visibilityState === 'visible';
    this.configsService.update_collab_visible(vis);
}

你已经完成了

3

1

yurzui 7 年前

打电话 removeEventListener() 对于不标识EventTarget上当前注册的任何EventListener的参数,WITH无效。你在传递其他函数。

使用 instance arrow function 应该对您的情况有所帮助:

ngOnInit() {
    document.addEventListener('visibilitychange', this.handleVisibleState, true);
}

ngOnDestroy() {
    document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}

handleVisibleState = () => {
    let vis = document.visibilityState === 'visible';
    this.configsService.update_collab_visible(vis);
}

4

0

mwilson 7 年前

这个原因 this.<anything> 不起作用是因为 this 是不同的,因为它在回调中,而您没有绑定它。

如果你 bind 这 它应该起作用。

document.addEventListener('visibilitychange', this.handleVisibleState.bind(this), true);