angular - 在 Angular 区域调用 detectChanges

Question

在 Angular 区域之外工作时，有两种方法可以检测变化 - 通过使用 NgZone.run 或使用 ChangeDetectorRef.detectChanges 方法重新进入区域。 NgZone.run 方法执行应用程序滴答，这可能会导致性能问题，因为它会重新检查整个应用程序。调用 detectChanges 仅更新我需要的组件 View ，但如果组件正在呈现一些它无法控制的内容并且依赖于在 Angular 区域中进行初始化，它就会停止工作。我创建了一个示例来演示此案例: https://stackblitz.com/edit/angular-zv5mf1?file=src/app/resize.component.ts

单击按钮最初会更新 View 。调整窗口大小后，按钮不再更新 View ，因为点击处理程序未绑定(bind)在 Angular 区域中并且不会触发更改检测。

我的问题是 - 有没有办法只检测组件 View 中的变化并初始化 Angular 区域中的内容。换句话说，在不触发应用程序滴答的情况下指定当前区域为 Angular 区域。

Answer 1

几种解决方案。

第一个是使用事件管理器:stackblitz

this.manager.addGlobalEventListener('window', 'resize', this.setCurrent.bind(this));

第二个是 HostListener 装饰器:stackblitz

@HostListener('window:resize', ['$event']) private setCurrent(): void {

第三个也是最后一个是全局目标上的模板绑定(bind):stackblitz

template: ` <span [style.display]="'none'" (window:resize)="setCurrent()"></span>