Angular根据设备宽度渲染组件时resize触发但视图不更新如何解决

问题根因 #

你在订阅resize事件时直接将普通函数this.onWindowResize作为回调传入，导致函数执行时上下文this指向丢失，修改的并不是组件实例上的mobile属性，因此Angular无法检测到属性变更，不会触发模板重新渲染。

解决方案 #

任选以下任意一种方式修复即可：

方法1：用箭头函数包裹回调

箭头函数会继承外部执行上下文的this指向，确保回调内的this指向当前组件实例：

ngOnInit() {
  // 用箭头函数包裹原方法调用
  this.resizeService.onResize$.subscribe(() => this.onWindowResize());
  this.onWindowResize();
}

方法2：将事件处理函数改为箭头函数属性

直接将onWindowResize定义为箭头函数属性，绑定固定的this指向：

// 修改函数定义方式
onWindowResize = () => {
  console.log("Resize!")
  this.mobile = window.innerWidth < 992;
}

ngOnInit() {
  // 直接传入即可，this不会丢失
  this.resizeService.onResize$.subscribe(this.onWindowResize);
  this.onWindowResize();
}

方法3：用bind绑定this指向

通过bind方法手动指定回调函数的this为当前组件实例：

ngOnInit() {
  this.resizeService.onResize$.subscribe(this.onWindowResize.bind(this));
  this.onWindowResize();
}

额外排查方案 #

如果完成上述修复后仍存在问题，可检查ResizeService的onResize$事件是否是在Angular的NgZone外触发，若是可以注入NgZone包裹属性赋值逻辑：

import { NgZone } from '@angular/core';

constructor(private resizeService: ResizeService, private ngZone: NgZone){}

onWindowResize = () => {
  console.log("Resize!")
  this.ngZone.run(() => {
    this.mobile = window.innerWidth < 992;
  })
}

内容的提问来源于stack exchange，提问作者0xAnakin