angular - 如何使用参数实例化 Angular 组件？

Question

我一直在尝试通过传递 nameFilter = new FilterComponent("Name"); 等参数来实例化组件但我收到此错误:

NullInjectorError: No provider for String!

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

这是组件代码

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() {
     }
}

Answer 1

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

在您的情况下，Angular 不知道要注入(inject)什么作为字符串 title .

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

@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