Angular 9：错误 NG2003：“DataService”类的参数“url”没有合适的注入令牌。找到字符串

Question

在处理我面临的问题的程序时，构造函数及其子类的依赖注入。

• DataService：一个服务类，它在一个地方拥有所有的 CRUD 操作，还有一个参数化的构造函数，用于从其子类注入端点 URL 和 HTTP。

constructor(private url: string, private http: Http) { }

• PostService：一个服务类，它扩展了上述 DataService 类以在其中包含 CRUD 操作功能和一个参数化的构造函数，并在内部调用 super(endPointURL, httpObject) ，如下所示：

constructor(http: Http) {
    super('https://jsonplaceholder.typicode.com/posts', http);
}

在此重构之前（移动所有常见的 CRUD 操作并通过子类扩展它），我的代码按预期工作，但在进行上述更改后，我收到以下错误：

Date: 2020-03-22T15:26:23.248Z - Hash: 7130497a38c152c58258
5 unchanged chunks

Time: 1859ms

ERROR in src/app/services/data.service.ts:14:23 - error NG2003: No suitable injection token for parameter 'url' of class 'DataService'.
Found string

14   constructor(private url: string, private http: Http) { }

此外，当我从 Datsource 构造函数中删除url参数（相应地修改 PostService.ts）时，api 按预期工作。不知道为什么！！！

我在用：

Angular CLI：9.0.4 节点：12.16.1 操作系统：win32 x64

角度：...常春藤工作区：

套餐版本

@angular-devkit/架构师 0.900.4

@angular-devkit/核心 9.0.4

@angular-devkit/schematics 9.0.4

@原理图/角度 9.0.4

@原理图/更新 0.900.4

rxjs 6.5.3

数据服务.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AppError } from '../common/app-error';
import { NotFoundError } from '../common/not-found-error';
import { BadInput } from '../common/bad-input';

@Injectable()
export class DataService {

//   private url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private url: string, private http: Http) { }

  getAll() {
    return this.http.get(this.url).pipe(catchError(this.errorHandle));
  } 

  create(resource) {
    return this.http.post(this.url, JSON.stringify(resource))
      .pipe(catchError(this.errorHandle));
  }

  update(resource) {
    return this.http.patch(this.url + '/' + resource.id, JSON.stringify({ isRead: true }))
    .pipe(catchError(this.errorHandle));
  }

  delete(resource) {
    return this.http.delete(this.url + '/' + resource.id)
      .pipe(catchError(this.errorHandle));
  }
  
  private errorHandle(error: Response){
    if (error.status === 404) {
      return throwError(new NotFoundError());
    }
    if (error.status === 400) {
      return throwError(new BadInput(error.json()));
    }
    return throwError(new AppError(error));
  }

}

邮政服务.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { DataService } from './data.service';

@Injectable()
export class PostService extends DataService {

  constructor(http: Http) {
    super('https://jsonplaceholder.typicode.com/posts', http);
  }

}

Answer 1

在DataService.ts 中：

更新构造函数。

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

constructor(@Inject(String) private url: string, private http: Http)

更新（解释）：

根据https://angular-2-training-book.rangle.io/di/angular2/inject_and_injectable；

@Inject() 是一种让 Angular 知道必须注入参数的手动机制。

@Inject 装饰器仅用于注入原语。

原始类型是数字、字符串、布尔值、bigint、符号、空值、未定义。

可以使用的另一种（替代）方式是：

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

@Inject('url') private url: string;

Answer 2

从 DataService.ts 中删除 @Injectable()

Answer 3

当我自己遇到同样的错误时，我相信您已经看过属于第 4 版的“Mosh”角度课程。

从那以后发生了一些变化，其中一个是用 HttpClient 替换 Http，另一个是 rxjs 库的巨大变化，不用说 services 也发生了同样的事情。更干净，与服务本身更相关。

但是，如果您密切关注实现，您会注意到 DataService 只是一个基类，它本身永远不会用作服务。它就像一个清单。因此，它不需要在 app 模块中注入或提供。如果您还记得“Mosh”从未在 App 模块中提供它。提供的唯一服务是 PostService。这就是为什么您应该从 DataService 中删除 @Injectable 装饰的原因。