Angular 6 服务中未定义 HttpClient 实例

Question

我有一个包装HttpClient的服务。 该服务由组件调用。 问题是，当我在组件构造函数中注入服务时，它是undefined 。 此外，服务构造函数似乎根本不执行，因为console.log不打印任何内容。 有任何想法吗？

@Injectable({
  providedIn: 'root'
})
export class MyHttpService {

  constructor(public httpx: HttpClient) {
        console.log("in the constructor - " + this.httpx) // <-- this is never printed
  }

  call () {
        let reqData = { act: 'R'};
        this.httpx.post('/myurl', reqData).subscribe(result => {
            console.log(result);
          }, error => console.log('There was an error: '));
    }
}

相关模块定义如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';
import { MyHttpService } from './http.service';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule, 
    HttpClient
  ],
  declarations: [
    MyHttpService
  ],
  exports: [
    MyHttpService
  ]
})
export class CoreServiceModule {}

调用服务的组件：

@Component({
      selector: 'some-selector',
      templateUrl: 'some-url.html'
    })
export class MyComponent implements OnInit{ 

    constructor(public http:MyHttpService){
          console.log(http);  // <-- this prints undefined
    }

    ngOnInit() {
        let x = this.http.call();  // <-- this fails as http is undefined       
    }


}

和组件模块：

@NgModule({
  declarations: [MyComponent],
  exports: [MyComponent],
  imports: [BrowserModule, CoreServiceModule],
  bootstrap: [MyComponent]
})
export class MyModule {}

Answer 1

请注意，我是 Angular 的新手，但我最近做了一些类似的事情，在查看我自己的类似项目时，我发现了一些不同之处：

1.注入 httpClient 时，它是私有的而不是公共的

constructor(private http: HttpClient) { }

2.我认为你需要包括

import { HttpClient } from '@angular/common/http';

在 MyHttpService 模块的顶部。

3.请注意，您以不同的名称定义了相同的模块两次：

HttpClientModule, 
HttpClient

为了整洁起见，我会删除一个。

希望这可以帮助。

更新 - 1：

这就是我的测试应用程序中的内容。 希望你会发现不同的东西，但它绝对适合我。

app.module.ts:

…
import { HttpClientModule } from '@angular/common/http';
import { HttpService } from './http.service';
…
@NgModule({
  declarations: [
  …
],
imports: [
    …
    HttpClientModule,
    …
  ],
}],
providers: [HttpService],
bootstrap: [AppComponent]
})
export class AppModule { }

我为我的 http 客户端服务创建了一个单独的文件。

http.service.ts：

…
import { HttpClient } from '@angular/common/http';
…

@Injectable({
  providedIn: 'root'
})

export class HttpService {

  private _loginUrl = "http://...";

  …

  // inject http client in constructor. Make sure it is imported.

  constructor(private http: HttpService) { }

  // Sample function
  loginUser(user) {
    return this.http.post<any>(this._loginUrl, user);
  }
}

从我的观点/组件来看：

登录.component.ts：

import { HttpService } from '../http.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  …
  constructor(private _http: HttpService) {
  }

  ngOnInit() {

  }

  loginUser() {
      this._http.loginUser(this.loginUserData).subscribe...
  }
}

Answer 2

您应该尝试类似的操作，不要忘记从@angular/core ModuleWithProviders接口。

export class CoreServiceModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreServiceModule,
      providers: [MyHttpService]
    }
  }
}

注意，你需要在你的app.module.ts中引入这个“共享模块”，在app.module中声明时，必须调用forRoot()方法。 然后，您就可以在应用程序的任何地方使用这个单例，而没有任何重新实例化的风险。

Answer 3

我有一个类似的问题：

this.httpx is undefined

最令我惊讶的是，将服务中的函数更改为箭头函数解决了问题：

  call = () => {
        let reqData = { act: 'R'};
        this.httpx.post('/myurl', reqData).subscribe(result => {
            console.log(result);
          }, error => console.log('There was an error: '));
    }

任何时候的事this是不明确的，我第一件事是检查是否“arrowing”的功能帮助。 比我感到舒服的次数更多，它确实如此。 我必须假设这是古老的 javascript this-fiasco 所做的。