我的 Angular 應用程序在 app.component.ts 文件中出現錯誤

Question

我已經完成了連接到我的 API 的 Angular 應用程序，但有一個我似乎無法解決的問題，HttpClient 不會導入，因為它沒有“無導出”成員。 我嘗試了各種方法，並嘗試在 http 文件中導出 httpclient。

這是我的 app.component.ts 文件

import { HttpClient } from './services/http.service';
import { Snake } from './_interfaces/snake.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public snake: Snake[];

  constructor(private http: HttpClient){}

  public getSnake = () => { 
    let route: string = 'http://localhost:5000/api/snake';
    this.http.getData(route) 
   .subscribe((result) => {
      this.snake = result as Snake[];
    },
    (error) => {
      console.error(error);
    });
  }
 }

這是我的應用程序模塊文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http'; 
import  {httpService} from './http.service'

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [httpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

這是我的 http 服務文件

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


@Injectable()
export class httpService
 {

  constructor(private http: HttpClient) { 

  }

  public getRoute():Observable<any>{
    return this.http.get('url');
  }

 }

我不太確定語法或如何確保應用程序組件文件可以導入 http，這是我的第一個 Angular 應用程序。

Answer 1

請更新更新您的服務看起來像這樣。

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

    @Injectable()
    export class httpService
     {

      constructor(private http: HttpClient) { 

      }

      public getRoute():Observable<any>{
        return this.http.get('url');
      }

     }

然后在您的應用程序模塊中導入您的服務並包含在您的提供者中，然后嘗試訪問組件文件