Angular组件effect调用方法时注入的SharedFacade为null问题

问题出在定时器回调的this上下文绑定错误：当你直接把this.dismissNotification传给setTimeout时，回调执行时的this不再指向组件实例，而是全局对象（浏览器环境下为window），导致this.sharedFacade变成undefined（或你看到的null）。而模板调用时Angular会自动帮你绑定组件实例的this，所以能正常工作。

以下三种方案任选其一即可：

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

箭头函数会自动捕获当前组件作用域的this，确保回调内的this指向组件实例：

effect(() => {
  // 先清除旧定时器，避免重复创建
  if (this.timeoutFx) {
    clearTimeout(this.timeoutFx);
  }
  if(this.globalNotification().selfDismissable){
    this.timeoutFx = setTimeout(() => this.dismissNotification(), 3000)
  }
})

方案2：用bind强制绑定this #

通过bind方法把dismissNotification的this永久绑定到组件实例：

effect(() => {
  if (this.timeoutFx) {
    clearTimeout(this.timeoutFx);
  }
  if(this.globalNotification().selfDismissable){
    this.timeoutFx = setTimeout(this.dismissNotification.bind(this), 3000)
  }
})

方案3：把方法定义为箭头函数 #

直接在类中将dismissNotification声明为箭头函数，这样它的this会始终指向组件实例，无论怎么调用都不会丢失上下文：

export class NotificationComponent {
  private sharedFacade = inject(SharedFacade);
  private timeoutFx: any;

  globalNotification = this.sharedFacade.globalNotification;

  constructor(){
    effect(() => {
      if (this.timeoutFx) {
        clearTimeout(this.timeoutFx);
      }
      if(this.globalNotification().selfDismissable){
        this.timeoutFx = setTimeout(this.dismissNotification, 3000)
      }
    })
  }

  // 改为箭头函数
  dismissNotification = () => {
    this.sharedFacade.dismissNotification();
    if(this.timeoutFx){
      clearTimeout(this.timeoutFx);
      this.timeoutFx = null; // 清理定时器引用
    }
  }
}

在effect里每次触发时记得先清除旧定时器，避免globalNotification多次变化后创建多个定时器，导致通知提前关闭或重复关闭的问题。

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