Angular使用createComponent动态创建组件时如何检查指定@Input

方案1：通过Angular内部组件定义获取输入元数据 #

Angular组件的内部定义包含所有@Input信息，可通过组件类的ɵɵcomponentDef属性（注意这是Angular内部API，版本更新可能导致失效）获取输入列表：

ngOnInit() {
    const ref = createComponent(this.myInjector, {
        environmentInjector: this.envInjector,
        elementInjector: this.injector,
        hostElement: this.element.nativeElement
    });

    // 获取组件输入属性映射（key为模板中使用的别名，value为组件类属性名）
    const componentInputs = ref.componentType.ɵɵcomponentDef.inputs;
    // 检查是否存在目标输入（兼顾别名和属性名）
    const hasTestInput = Object.values(componentInputs).includes('test') || Object.keys(componentInputs).includes('test');
    
    if (hasTestInput) {
        ref.setInput('test', 'value');
    }
}

方案2：使用Reflect Metadata读取输入元数据 #

Angular编译时会将@Input信息存储在Reflect Metadata中，可直接读取：

import 'reflect-metadata';

// ...

ngOnInit() {
    const ref = createComponent(this.myInjector, {
        environmentInjector: this.envInjector,
        elementInjector: this.injector,
        hostElement: this.element.nativeElement
    });

    // 获取组件的属性元数据，筛选出@Input标记的属性
    const propMetadata = Reflect.getMetadata('propMetadata', ref.componentType);
    const hasTestInput = !!propMetadata?.['test']?.some(meta => meta instanceof Input);
    
    if (hasTestInput) {
        ref.setInput('test', 'value');
    }
}

注意：若项目在tsconfig.json中设置emitDecoratorMetadata: false，该方法会失效。

方案3：封装安全的setInput方法，捕获错误 #

如果不想依赖内部API或元数据，可直接捕获setInput抛出的错误，优雅处理：

function safeSetInput<T>(componentRef: ComponentRef<T>, inputName: string, value: any) {
    try {
        componentRef.setInput(inputName, value);
    } catch (e) {
        // 可忽略错误或记录日志
        console.warn(`Input "${inputName}" does not exist on component`, componentRef.componentType);
    }
}

// 使用示例
ngOnInit() {
    const ref = createComponent(this.myInjector, {
        environmentInjector: this.envInjector,
        elementInjector: this.injector,
        hostElement: this.element.nativeElement
    });

    safeSetInput(ref, 'test', 'value');
}

方案4：利用ComponentFactoryResolver（兼容旧版本） #

若项目需兼容Angular旧版本，可通过ComponentFactoryResolver获取组件工厂，进而获取输入属性：

import { ComponentFactoryResolver } from '@angular/core';

// 构造函数中注入ComponentFactoryResolver
constructor(private cfr: ComponentFactoryResolver) {}

ngOnInit() {
    const factory = this.cfr.resolveComponentFactory(this.myInjector);
    // 检查是否存在目标输入（兼顾属性名和模板别名）
    const hasTestInput = factory.inputs.some(input => input.propName === 'test' || input.templateName === 'test');
    
    const ref = createComponent(this.myInjector, {
        environmentInjector: this.envInjector,
        elementInjector: this.injector,
        hostElement: this.element.nativeElement
    });

    if (hasTestInput) {
        ref.setInput('test', 'value');
    }
}

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri