Angular 在确认对话框中从回调调用HTTP服务时出错

我正在处理Angular（v7）应用程序，当试图从对话组件调用HTTP服务时，我遇到了一个奇怪的错误

与其解释我的代码安排，不如让我向您展示重要的部分

我的HttpService:

export class HttpService {
   constructor(
      private _http: HttpClient
   ) { }

sendPost = (url, msg = {}, defTimeout = 30000, defRetries = 0) => {

  return this._http
     .post(url, msg, {
        headers: this.getHeaders(),
        observe: "response"
     })
 ...

export class CompanyProfileService {
   constructor(
      private httpService: HttpService,
      private env: EnvironmentService
   ) { }

   public setMyCompanyProfile$(msg: UpdateMessage) {
      let url = this.env.setCompanyProfileURL;
      let retVal = this.httpService.sendPost(url, msg)
      return retVal;
   }

export class CompanyProfileService {
       constructor(
          private http: HttpService,
          private env: EnvironmentService
       ) { }**

export class CompanyProfileService {
   constructor(
      private httpService: HttpService,
      private env: EnvironmentService
   ) { }

使用我的Http服务的应用程序服务：

export class HttpService {
   constructor(
      private _http: HttpClient
   ) { }

sendPost = (url, msg = {}, defTimeout = 30000, defRetries = 0) => {

  return this._http
     .post(url, msg, {
        headers: this.getHeaders(),
        observe: "response"
     })
 ...

export class CompanyProfileService {
   constructor(
      private httpService: HttpService,
      private env: EnvironmentService
   ) { }

   public setMyCompanyProfile$(msg: UpdateMessage) {
      let url = this.env.setCompanyProfileURL;
      let retVal = this.httpService.sendPost(url, msg)
      return retVal;
   }

export class CompanyProfileService {
       constructor(
          private http: HttpService,
          private env: EnvironmentService
       ) { }**

export class CompanyProfileService {
   constructor(
      private httpService: HttpService,
      private env: EnvironmentService
   ) { }

当我直接从我的组件调用它们时，上面的方法方案非常有效。也就是说，我将特定于应用程序的服务注入到我的组件中，我可以很好地调用这些方法

然而，我们有一些用例，在我们进行更新之前，我们希望用户确认他们的操作。为此，我们（使用angular material对话框）创建了一个公共包装器/库，用于创建一个对话框，然后如果用户选择“OK”，对话框完成将调用服务http方法。此对话框的部分数据是要调用的服务函数的名称（例如setMyCompanyProfile$）和要在请求中发送的消息

我们的一些早期服务使用上述方案工作，但突然，控制台中出现运行时错误，如下所示：

ERROR TypeError: Cannot read property 'sendPost' of undefined
at ConfirmComponent.push../src/app/services/company-profile.service.ts.CompanyProfileService.setMyCompanyProfile$ [as serviceFcn] (company-profile.service.ts:65)
at ConfirmComponent.push../src/app/services/confirm/confirm.component.ts.ConfirmComponent.onProceed (confirm.component.ts:50)
at Object.handleEvent (confirm.component.html:3)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)
at core.js:21003
at HTMLButtonElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

构造函数上的此签名导致错误：

export class HttpService {
   constructor(
      private _http: HttpClient
   ) { }

sendPost = (url, msg = {}, defTimeout = 30000, defRetries = 0) => {

  return this._http
     .post(url, msg, {
        headers: this.getHeaders(),
        observe: "response"
     })
 ...

export class CompanyProfileService {
   constructor(
      private httpService: HttpService,
      private env: EnvironmentService
   ) { }

   public setMyCompanyProfile$(msg: UpdateMessage) {
      let url = this.env.setCompanyProfileURL;
      let retVal = this.httpService.sendPost(url, msg)
      return retVal;
   }

export class CompanyProfileService {
       constructor(
          private http: HttpService,
          private env: EnvironmentService
       ) { }**

export class CompanyProfileService {
   constructor(
      private httpService: HttpService,
      private env: EnvironmentService
   ) { }

---

为什么私有变量的名称很重要？

我在我的各个组件中放了一些控制台语句，我想我明白了为什么它只在使用“http”名称时才起作用。我认为这与范围和/或关闭问题有关

我应该用不同的方式设计它，并使用继承

---

经验教训…

当您更改名称时，您确定它返回正确的服务吗？第二，这种问题通常是由于依赖项注入无法访问正确的服务造成的，因此请仔细检查服务是否已实例化（例如，向HttpService构造函数添加一些消费日志）