Question

我们有一些奇怪的依赖注入问题我们不明白......我试图证明这种情况。

我们有一个addressComponent，我们注入了addressService。所以这是服务（参见两个注入http和appConfig）：

@Injectable()
export class AdresseService{

  constructor(private http: Http, private appConfig: AppConfig) {
        ....
  }

  makeSth() {
      this.http.get(.....);
  }
}

这是组件：

export class AdresseComponent {

  constructor(public adresseService: AdresseService) {
  }
}

此组件的html中包含以下代码段：

  <other-component-tag [fn]="adresseService.makeSth"</other-component-tag>

因此，我们在组件中注入服务，并将此服务的功能作为参数提供给另一个组件。这是另一个组件，我们实际上称之为这个函数：

export class OtherComponent {

  @Input() fn;

  callFunction() {
    this.fn();
  }
}

所以问题：实际上调用了AdresseService的函数“makeSth”，但是没有注入服务依赖项（即http或appConfig）。所以我们在AdresseService的makeSth方法中得到了一些错误，例如“get of undefined ....”。这是怎么回事？

当我们将服务定义为其他组件的依赖项时，它可以工作。当我们将整个服务（而不是只提供它的功能）作为参数时，它也可以工作。但为什么这个设置不起作用？

Answer 1

您正在将类函数作为回调传递。在这种情况下，this的值会发生变化，新的this将不会有http和其他注入的属性。

使用箭头功能或绑定功能作为回调。

在您的组件中，

export class AdresseComponent {

  makeSth:any;

  constructor(public adresseService: AdresseService) {
    this.makeSth = () => this.adresseService.makeSth()
  }
}

在你的HTML中，

 <other-component-tag [fn]="makeSth"</other-component-tag>

当服务函数用作输入参数

1 个答案: