解决 Angular 9 错误 NG2003

当在 Angular 9 中出现错误 NG2003，提示没有适合类“DataService”的参数“url”的注入令牌时，这通常意味着在 DataService 类的构造函数中缺少必需的参数。您可以遵循以下步骤来解决这个问题：

检查 DataService 类的构造函数

首先，检查您的 DataService 类的构造函数是否正确。该构造函数应该包含一个参数，即类型为字符串的 url。请确保 url 参数已正确声明并包含在构造函数中。

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

@Injectable()
export class DataService {
  constructor(private url: string) { }
}

在提供程序中添加 DataService

接下来，确保您已在提供程序中添加 DataService。在服务提供程序数组中添加 DataService 之前，您需要在它之前添加 url 参数。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    {
      provide: 'url',
      useValue: 'https://example.com/api/data'
    },
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在提供程序中，我们使用 provide 关键字为 url 参数创建一个注入令牌，并将其添加到服务提供程序数组中。然后，我们添加 DataService 到提供程序数组中。

现在，当我们在组件中注入 DataService 时，Angular 会使用提供的 url 参数来创建一个 DataService 实例。

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Data: {{ data }}</h1>
  `
})
export class AppComponent {
  data: any;

  constructor(private dataService: DataService) {
    this.data = dataService.getData();
  }
}

结论

通过检查 DataService 类的构造函数并在提供程序中添加 url 参数和 DataService，您可以解决 Angular 9 中的 NG2003 错误。