为什么构造函数中的 Angular 服务（包括 httpClient）会破坏模块？

Question

所以基本上我创建了一个后端 RESTful API 并尝试访问它。

因此我创建了一个 database-connection.service 来发帖。

我在实现它时遇到了问题。

以下是我的代码。如果发现并解释了问题，将不胜感激...

+ app
|- app-routing.module.ts
|- app.component.css
|- app.component.html
|- app.component.spec.ts
|- app.component.ts
|- app.module.ts
|-+ homepage
  |- homepage-routing.module.ts
  |- homepage.module.ts
  |-+ spelling-app
    |- database-connection.service.ts
    |- database-connection.service.spec.ts
    |- spelling-app.module.ts
    |- user.model.ts
    |-+ intro-page
      |- intro-page.component.ts
      |- intro-page.component.css
      |- intro-page.component.html
      |- intro-page.component.spec.ts

spelling-app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SpellingAppRoutingModule } from './spelling-app-routing.module';
import { IntroPageComponent } from './intro-page/intro-page.component';

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    CommonModule,
    SpellingAppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  declarations: [IntroPageComponent]
})
export class SpellingAppModule { }

数据库连接.service.ts

import { Injectable } from '@angular/core';

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

import { User } from './user.model';

import { Observable } from 'rxjs';

@Injectable()
export class DatabaseConnectionService {

  constructor(private http:HttpClient) { }


  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  public addUser(user: User): Observable<User> {
    return this.http.post<User>('http://localhost:8081/add-user', user, this.httpOptions)
  }

}

intro-page.component.ts

import { Component, OnInit } from '@angular/core';

import { User } from '../user.model';

import { DatabaseConnectionService } from '../database-connection.service';


@Component({
  selector: 'app-intro-page',
  templateUrl: './intro-page.component.html',
  styleUrls: ['./intro-page.component.css']
})

export class IntroPageComponent implements OnInit {

  public results:any;
  private user = new User();

  constructor(
    private DatabaseConnectionService: DatabaseConnectionService
  ) { }

  ngOnInit() { }

  callpost() {
    this.results = this.DatabaseConnectionService.addUser(this.user);
  }

}

Answer 1

您需要在服务模块中添加“提供者”。确保您的角度已更新，以便提供者被接受。

@NgModule({
  imports: [
  ...
  ],
  declarations: [...],
  providers:[DatabaseConnectionService]
})

或者在你的服务中使用 Injectable

@Injectable({
  providedIn: 'root', //or providerIn:YourModule
})

您还需要在 app.module.ts 中添加 HttpClientModule，而不是在其他模块中。

Observable 后面还需要一个操作；

this.results.toPromise().then(...).catch(...)