Angular组件注入Service异常：调用getSup时报错未定义求排查

你遇到的不是服务注入失败的问题，而是函数调用时的this指向错误。当直接把this.processData作为回调传给subscribe时，回调函数的this不再指向组件实例，导致this.accessService为undefined，进而抛出getSup未定义的错误。

下面是三种可行的解决方法：

• 方法一：用箭头函数包裹回调
  修改ngAfterViewInit中的订阅代码，通过箭头函数保留组件的this上下文：

  ngAfterViewInit() {
      this.processService.getData().pipe(takeUntil(destroy$)).subscribe(data => this.processData(data));
  }
  

• 方法二：在构造函数中绑定this
  在组件构造函数里，把processData的this绑定到组件实例：

  constructor() {
      this.processData = this.processData.bind(this);
  }
  

  这样后续无论怎么调用processData，它的this都会指向组件实例。

• 方法三：将processData定义为箭头函数
  直接把processData改成箭头函数形式，箭头函数会自动继承外层的this（也就是组件实例）：

  processData = (data: ReviewObject) => {
      if(data)
          this.accessService.getSup(data.id).pipe(takeUntil(destroy$)).subscribe(console.log);
      else {
          //omitted code
      }
  }
  

你可以在processData里加一句console.log(this)验证，原来的写法里this指向的是订阅相关的对象，而非组件实例，所以找不到注入的accessService。

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