Question

因此，我不是在尝试使用类似构造函数初始化某些字段的情况下注入服务。

  constructor(private wheels : number, private model : string, private automatic : boolean, private colour : string, private engine : string, private seats :number) { 
    this.wheels = wheels;
    this.model = model;
    this.automatic = automatic;
    this.colour = colour;
    this.engine = engine;
    this.seats = seats;
  }

如果我创建一个新对象，然后在console.log该对象中包含所有初始值，则现在尝试不使用this.x = x，但是该项目将不会加载并显示此错误消息。

>

ERROR Error: StaticInjectorError(AppModule)[Module1AComponent -> Number]: 
  StaticInjectorError(Platform: core)[Module1AComponent -> Number]: 
    NullInjectorError: No provider for Number!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
    at resolveToken (core.js:1271)
    at tryResolveToken (core.js:1216)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
    at resolveToken (core.js:1271)
    at tryResolveToken (core.js:1216)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
    at resolveNgModuleDep (core.js:8161)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:8849)
    at resolveDep (core.js:9214)

非常令人沮丧，因为我似乎无法就围绕领域的注入问题找到很多糟糕的事情，仅就服务而言。

Answer 1

似乎您正在将参数传递给Angular的Component类，以便可以new起来创建它的实例。但是，一旦您将其声明为成角的@Component。在执行时，Angular框架高举了类constructor，并开始求值constructor的每个参数并检查Dependency Injection中的每个参数。基本上，它确实将每个参数的类型作为token传递给依赖注入系统。并根据token的{{1}}数组内的令牌的provider提取到该providers的值映射

假设您在下面的类中编写了构造函数具有类型@NgModule的{{1}}参数。在执行组件时，Angular DI系统将尝试查找test提供程序的实例（确保单例实例，取决于Injector层次结构），然后为该实例提供服务。

number

也是

的简写

number

尽管我不建议允许像您正在考虑的方式那样手动创建Angular组件类实例。我不会说这行不通，但不是很好的做法。尽管要使其正常工作的解决方法是在这些参数之前使用constructor(private test: number)装饰器。如果在应用程序上下文的constructor(@Inject(number) private test)容器内找不到值，@Optional将基本上返回@Optional()值。

null

Answer 2

constructor（）函数期望提供者对象作为参数，因为“字符串”或“数字”是角型的类型会产生错误，如果您只想初始化一些值，则必须将代码更改为如下所示：

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

@Component({
  selector: 'app-nav-main',
  templateUrl: './nav-main.component.html',
  styleUrls: ['./nav-main.component.css']
})
export class NavMainComponent implements OnInit {

  private wheels : number;
  private model : string;
  private automatic : boolean;
  private colour : string;
  private engine : string; 
  private seats :number;

  constructor() { }

  ngOnInit() {
    this.wheels = 4;
    this.model = 'Model X';
    this.automatic = false;
    this.colour = 'Black';
    this.engine = 'Engine Y'; 
    this.seats = 5;
  }
}

Angular 5+构造器字段注入器错误

2 个答案: