是否可以在运行时动态设置组件@Input？

Question

假设我有一个 dynamic-component-wrapper 可以实例化任何传递给它的 Component 类。

// DRE013 DCOOKE 16/05/2017 - The component to instantiate.
@Input() componentType: Type<{}>;

// DRE013 DCOOKE 16/05/2017 - the component that will be created
private _cmpRef: ComponentRef<Component>;


// DRE013 DCOOKE 16/05/2017 - Creates a component ref in the view at #target
createComponent(){

    let factory = this.componentFactoryResolver.resolveComponentFactory(this.componentType);
    this._cmpRef = this.target.createComponent(factory);
    //this._cmpRef.instance.inputs >>>>>>>>> this is a string[] and I do not see how I can use this 
}

示例用法

<shared-dynamic-component [componentType]="TestComponent"></shared-dynamic-component>

在哪里 TestComponent = TestComponent //class

这按预期工作，我可以从dynamic-component-wrapper 中接收此组件的实例，如下所示：

this._cmpRef.instance

Angular docs 在此 instance 对象上并不清楚 - 只是说明该实例是 C 类型 - 绝对没有提及 C 的实际含义。

谢天谢地，我的 IDE 能够告诉我：

ComponentRef.instance 具有以下属性：

• inputs : string[]
• outputs : string[]

但是我不明白我应该如何使用这些信息。我想这只是@Input 字段的名称 - 但我想不出如何将复杂对象作为输入传递。

问题

我是否可以在使用componentFactoryResolver 动态创建组件后设置@Inputs 和其他元数据？

Answer 1

自动更新

这似乎是不可能的。原因如下。

对于每个组件，Angular 编译器都会创建一个工厂。您可以在ng:// 文件夹下的sources 选项卡中观察所有工厂，here is the example 的外观。当它创建一个工厂时，它定义了nodes，它将在这个组件视图中呈现。一些节点是子组件。

在生成这个工厂时，它定义了框架应该跟踪的输入属性。因此，除非您在编译之前定义了输入属性，否则 Angular 不会跟踪和更新输入。

这是这个工厂的外观示例：

function View_AppComponent_0(l) {
  return jit_viewDef2(0,[
    jit_queryDef3(201326592,1,{someComp: 0}),
    (l()(),jit_elementDef4(0,null,null,1,'h1',[],null,null,null,null,null)),
    (l()(),jit_textDef5(null,[
      'Hello ',
      ''
    ]
    )),
    (l()(),jit_textDef5(null,['\n\n'])),
    (l()(),jit_elementDef4(0,null,null,1,'b-comp',[],null,null,null,jit_View_BComponent_06,jit__object_Object_7)),

      *************************************
      // this is a child component's node definition which has `some` property binding
      jit_directiveDef8(24576,null,0,jit_BComponent9,[],{some: [
        0,
        'some'  <------------------------ property name to track
      ]
    },null)
     **************************************************

  ]

当您使用this.componentFactoryResolver.resolveComponentFactory 时，它实际上会搜索该工厂。它不会编译任何东西。

手动更新

这当然是可能的。您可以从父组件查询子组件并更新属性 - 它将在子组件的模板中正确呈现。你甚至可以触发 onChanges 生命周期钩子。

export class AppComponent {
  @ViewChild(BComponent) bc;

  ngAfterViewInit() {
    setTimeout(() => {
      this.bc.some = 'foo';
      const changes = {some: new SimpleChange('', 'foo', true)};
      this.bc.ngOnChanges(changes);
    })
  }

Answer 2

我最终创建了一个类来这样做...以防这对其他人有所帮助。

用法

const componentChangeBuilder = new DynamicComponentChangeBuilder(componentRef);
componentChangeBuilder.addInput('inputName', 'some string value');
componentChangeBuilder.addInput('someOtherInputName', 1234);
componentChangeBuilder.commit();

import { ComponentRef, OnChanges, SimpleChange, SimpleChanges } from '@angular/core';

/**
 * Use this to track and trigger ngOnChanges for dynamically loaded components.
 */
export class DynamicComponentChangeBuilder<TComponent = any> {
    private readonly componentRef: ComponentRef<TComponent>; 
    private readonly inputs = new Map<keyof TComponent, TComponent[keyof TComponent]>();
    private readonly changesHistory = {} as SimpleChanges;

    constructor(componentRef: ComponentRef<TComponent>) {
        this.componentRef = componentRef;        
    }

    public addInput(
        input: keyof TComponent,
        value: TComponent[typeof input],
    ): void {
        this.inputs.set(input, value);
    }

    public commit() {
        const currentChanges = {} as SimpleChanges;

        this.inputs.forEach((newValue, input) => {
            const previousChange = this.changesHistory[input as string];
            let currentChange: SimpleChange;
            if (!!previousChange) {
                currentChange = {
                    previousValue: previousChange.currentValue,
                    currentValue: newValue,
                    firstChange: false,
                } as SimpleChange;
            } else {
                currentChange = {
                    currentValue: newValue,
                    firstChange: true,
                } as SimpleChange;
            }

            this.changesHistory[input as string] = currentChange;
            currentChanges[input as string] = currentChange;
            this.componentRef.instance[input] = currentChange.currentValue;
        });

        if (implementsOnChanges(this.componentRef.instance)) {
            this.componentRef.instance.ngOnChanges(currentChanges);
        }
    }
}

function implementsOnChanges(component: any): component is OnChanges {
    return (component as OnChanges)?.ngOnChanges !== undefined;
}