Angular使用callback调用函数报Cannot read properties of undefined (reading 'sanitizer')错误

核心问题是函数调用时的this上下文丢失，属于JavaScript的基础语法特性，和Angular框架本身无关。

具体原理 #

• 你最初的写法里，将this.generateSafeUrl作为参数传入getQueryParams方法时，仅传递了函数本身的引用，没有绑定该函数原本所属的组件实例上下文。
• 当你在route.queryParams的订阅回调里直接执行callback()时，generateSafeUrl内部的this指向不再是当前组件实例，严格模式下会是undefined，自然读取不到挂载在组件实例上的sanitizer属性，触发了你遇到的报错。
• 你修改后的写法直接通过this.generateSafeUrl()调用方法，此时的this明确指向当前组件实例，所以可以正常获取到sanitizer属性，运行无报错。

如果需要保留callback传参的写法，可以用以下任意一种方案修复： #

• 传参时手动绑定组件实例上下文：

ngOnInit(): void {
  this.getQueryParams(this.generateSafeUrl.bind(this));
}

• 将generateSafeUrl改为箭头函数，箭头函数的this会继承定义时的上下文，不会随调用方式改变：

generateSafeUrl = ({ analysisId = null, domain = null }) => {
  let url = 'https://my-site.s3-eu-west-1.amazonaws.com/index.html';
  if (analysisId && domain) {
    url = `${url}?analysisId=${analysisId}&domain=${domain}`;
  }
  this.safeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

• 调用callback时手动绑定上下文：

getQueryParams(callback) {
  this.route.queryParams.subscribe(params => {
    let analysisId = params['analysisId'] || null;
    let domain = params['domain'] || null;
    callback.call(this, { analysisId, domain });
  });
}

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