无法解析 Angular 中 CustomComponent 的所有参数答案

【问题标题】：Can't resolve all parameters for a CustomComponent in Angular无法解析 Angular 中 CustomComponent 的所有参数
【发布时间】：2018-08-16 12:38:53
【问题描述】：

当我尝试为生产构建项目时，我收到以下错误：

无法解析 EmployeeComponent 的所有参数 C:/.../src/app/employee/employee.component.ts: (?, ?, ?)。

虽然当我为应用程序提供服务时，我没有收到任何错误，而且应用程序运行良好。

EmployeeComponent 如下所示：

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

import { Score } from '../score/score';

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

  name: string;
  employeeId: number;
  totalScore: number;
  scores: Score[] = new Array<Score>();

  public constructor(name: string, employeeId: number, scores: number[]) {
    this.name = name;
    this.employeeId = employeeId;
    this.totalScore = 0;
    for(let i = 0; i < 5; i++) {
      this.scores[i] = new Score(scores[i], i);
      this.totalScore += scores[i];
    }
  }

  ngOnInit() {
  }

  setTotalScore() {
    this.totalScore = 0;
    for(let score of this.scores) {
      this.totalScore += Number(score.value);
    }
  }

}

EmployeeComponent 有一个scores 变量，其类型为Score，定义如下：

export class Score {
   value: number;
   id: number;
   constructor(value: number, id: number) {
       this.value = value;
       this.id = id;
    }
 }

我正在按如下方式创建员工：

import { EmployeeComponent } from './employee/employee.component';

export var mockEmployees: EmployeeComponent[] = [
    new EmployeeComponent("Lorem Ipsum 1", 1, [10, 20, 30, 40, 50]),
    new EmployeeComponent("Lorem Ipsum 2", 2, [11, 21, 31, 41, 51]),
    new EmployeeComponent("Lorem Ipsum 3", 3, [12, 22, 32, 42, 52]),
    new EmployeeComponent("Lorem Ipsum 4", 4, [13, 23, 33, 43, 53]),
    new EmployeeComponent("Lorem Ipsum 5", 5, [14, 24, 34, 44, 54]),
    new EmployeeComponent("Lorem Ipsum 6", 6, [15, 25, 35, 45, 55]),
    new EmployeeComponent("Lorem Ipsum 7", 7, [16, 26, 36, 46, 56]),
    new EmployeeComponent("Lorem Ipsum 8", 8, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 9", 9, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 10", 10, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 11", 11, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 12", 12, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 13", 13, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 14", 14, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 15", 15, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 16", 16, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 17", 17, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 18", 18, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 19", 19, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 20", 20, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 21", 21, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 22", 22, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 23", 23, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 24", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 25", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 26", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 27", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 28", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 29", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 30", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 31", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 32", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 33", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 34", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 35", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 36", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 37", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 38", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 39", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 40", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 41", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 42", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 43", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 44", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 45", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 46", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 47", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 48", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 49", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 50", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 51", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 52", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 53", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 54", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 55", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 56", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 57", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 58", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 59", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 60", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 61", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 63", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 64", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 65", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 66", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 67", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 68", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 69", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 70", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 71", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 72", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 73", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 74", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 75", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 76", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 77", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 78", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 79", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 80", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 81", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 82", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 83", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 84", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 85", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 86", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 87", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 88", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 89", 24, [17, 27, 37, 47, 57]),
    new EmployeeComponent("Lorem Ipsum 90", 24, [17, 27, 37, 47, 57]),
];

谁能告诉我为什么会出现这个错误？

【问题讨论】：

你能运行ng serve --aot吗？你得到什么错误？
在启用--aot 的情况下再次尝试投放，看看是否有效。 DI 可能试图提前解决问题，但失败了。
我会尝试将所有这些 ctor 参数设为可选。
您如何使用EmployeeComponent？您可能应该使用 @Input 而不是构造函数。
您在哪里提供姓名、员工 ID 和分数？

标签： angular typescript

【解决方案1】：

因为EmployeeComponent 是一个有角度的Component（它有@component 注释），所以你不能像你所做的那样在构造函数中提供输入。请检查this link 以了解清楚。你也不能用new创建组件

请使用@Input 来提供这些输入。检查here

【讨论】：

非常感谢，这解决了问题。我创建了一个 Employee 类，然后在 EmployeeComponent 中创建了一个变量并使用 mockEmployees 对其进行了初始化。 mockEmployees 有一个 Employee 数组变量。

【解决方案2】：

您应该使用@Input 为您的组件填充数据：

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

  @Input()
  name: string;
  @Input()
  employeeId: number;
  @Input()
  scoreNumbers: number[]
  totalScore: number;
  scores: Score[] = new Array<Score>();

  public ngOnInit() {
    this.totalScore = 0;
    for(let i = 0; i < 5; i++) {
      this.scores[i] = new Score(this.scoreNumbers[i], i);
      this.totalScore += scores[i];
    }
  }

然后在模板中使用组件

<app-employee [name]="myName" [employeeId]="myEmployeeId" [scoreNumbers]="myScores"></app-employee>

其中myName、myEmployeeId 和myScores 是包含您要显示的数据的变量。

在the docs 中阅读有关 Angular 组件中数据流的更多信息。

【讨论】：