Angular 如何在 Angular 服务中注入 HttpClient

Question

我想要一个使用http请求的服务。

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})

export class BackendService {
  private backendUrl = 'http://localhost:4200/';

  constructor(private http: HttpClient) { }

  //not done as observable
  uploadImage(image: any) {
    let formData = new FormData()
    formData.append("image",image);

    return this.http.post<any>(`${this.backendUrl}/upload`, formData);
  }
}

和一个我想注入它的组件：

import { BackendService } from '../backend-service.service';

@Component({
  selector: 'app-image-picker',
  standalone: true,
  imports: [MatCardModule,CommonModule,MatButtonModule,MatIconModule],
  templateUrl: './image-picker.component.html',
  styleUrl: './image-picker.component.css'
})
export class ImagePickerComponent {
  selectedImage: string | ArrayBuffer | null | undefined = null;

  constructor(private backendService: BackendService){}
}

但这给我带来了

NullInjectorError: No provider for _HttpClient!

错误。

在教程中，他们似乎将服务添加到

app.module.ts

。但是我没有

app.module.ts

，当前的方法是使用独立组件。

我该如何解决这个问题？我是否需要创建

app.module.ts

或者有更好的方法吗？

Answer 1

您需要将

provideHttpClient()

添加到您的

providers

的

AppModule

。