Question

我正在使用组件工厂动态生成动态组件。工厂传递一组数据，包括生成组件的输入参数：

<app-field-factory [componentData]="componentSeedData"></app-field-factory>

这工作正常，“field factory”组件处理数据。在每个生成的组件中，我都有类似的东西：

export class TextInputComponent implements OnInit {

  @Input() id: number;
  @Input() field_name: string;
  @Input() parent: string;
  @Input() validators: {};

  public fieldForm: FormGroup;

  constructor(
      private injector: Injector,
      private formBuilder: FormBuilder,
    ) {
    this.id = this.injector.get('id');
    this.field_name = this.injector.get('field_name');
    this.parent = this.injector.get('parent');
    this.validators = this.injector.get('validators');
  }

但是，我无法弄清楚如何使其中一个输入可选（即它可能存在也可能不存在）。我尝试了各种各样的事情，例如添加“？”并将this.injector.get行包装在条件中。我得到的只是“没有...... 的提供者”错误。

假设parent输入在某些情况下可能不存在。如何在生成的组件中考虑到这一点？

Answer 1

根据Injector.get签名

abstract get<T>(token: Type<T>|InjectionToken<T>, notFoundValue?: T): T;

您可以将默认值指定为第二个参数：

this.parent = this.injector.get('parent', null);

在这种情况下，angular不会抱怨未解决的提供者。它将返回null。然后你可以简单地使用像if (this.parent)

这样的条件

Answer 2

用这个？：

@Input() parent?: string;

Answer 3

组件中的每个输入都可以视为可选。如果在使用组件时没有定义绑定，则该值将保持未初始化状态或使用默认值初始化。

class MyComponent {
   @Input() v;

//在更改检测期间，绑定v将设置为32 //绑定v将保持单元化

请注意，Angular不会为动态组件自动处理@Input()因为正确设置输入绑定需要知道在编译期间如何使用组件，动态组件不是这种情况。

同时阅读：

如何声明可选的注入@input参数？

3 个答案: