如何使用参数实例化 Angular 组件？答案

【问题标题】：How to instantiate Angular components with parameters?如何使用参数实例化 Angular 组件？
【发布时间】：2019-09-02 04:39:04
【问题描述】：

我一直在尝试通过传递 nameFilter = new FilterComponent("Name"); 之类的参数来实例化组件，但我收到了这个错误：

NullInjectorError: 没有字符串的提供者！

我相信依赖注入会导致这种情况，因为如果我不向组件注入任何东西，我不会收到任何错误。那么究竟是什么原因造成的，我该如何解决呢？

这是组件代码

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

@Component({
     selector: 'app-filter',
     templateUrl: './filter.component.html',
     styleUrls: ['./filter.component.scss']
})
export class FilterComponent implements OnInit {
     title: String;

     constructor(title: String) {
          this.title = title;
     }

     ngOnInit() {
     }
}

【问题讨论】：

在构造函数参数中，您引用 String 类型的标题将其替换为 string ，s 小写
不，不起作用
将其更改为 string 也将不起作用，因为 Angular 将尝试为 string 这是一个原始类型寻找提供者。同样作为好的设计，避免在构造函数中注入原始类型。
我一直在尝试创建具有不同值的组件类的多个实例，这就是我这样做的原因。老实说，如果不注入原始值，我不知道该怎么做。你能解释一下怎么做吗？
您正在寻找您将从调用组件的 html 注入的 @Input。

标签： angular typescript dependency-injection angular-components

【解决方案1】：

错误很明显，你是对的，依赖注入机制导致了它。您传递给构造函数的每个依赖项都必须在运行时注入，Angular 需要知道要传递什么。

在你的情况下，Angular 不知道要注入什么作为字符串 title。

您可以明确告诉 Angular 为 String 类型在模块提供程序数组中注入什么。但是，这意味着每次都将使用您在提供程序数组中提供的任何内容。

@NgComponent({
    ...
    providers: [
    { provide: String, useValue: 'my title' }
  ],
})

查看您的代码后，您可以使用 @Input 变量初始化组件 - Angular component interaction

export class FilterComponent implements OnInit {
     @Input() title: string; 
}

<app-filter [title]="Title 1"></app-filter>

简单演示：https://stackblitz.com/edit/angular-rs6sfy

【讨论】：

从 HTML 注入值确实可能是更好的解决方案，但由于某种原因我似乎无法让它工作。当我尝试您的第二个代码 sn-p 时，标题值变得未定义。
哦，一直都是“”。应该是' '。

【解决方案2】：

作为一种良好的设计实践，避免在组件构造函数中注入 string、number、date 等原始数据类型。

但如果你仍然需要注入它们。然后你应该让 Angular 知道令牌和要注入的值。

为此，Angular 提供了InjectionToken API。 https://angular.io/api/core/InjectionToken#injectiontoken

在组件中注入日期类型的示例：

export const DATE = new InjectionToken<Date>('date');

@NgComponent({
    ...
    providers: [
    { provide: DATE, useValue: new Date() } //can be declared at the module as well
  ],
})
export class SomeComponent {

  constructor(
    @Inject(DATE) private fromDate: Date,
    @Inject(DATE) private toDate: Date
  ) {}

}

【讨论】：