动态生成Angular组件属性检测难题：寻求更优解决方案

问题核心：TypeScript类中仅声明类型但未初始化的属性，编译为JavaScript后不会被添加到实例或原型上，导致hasOwnProperty和in运算符无法检测到这些仅存在于类型层面的属性。

以下是几种更有效的解决方案：

方案1：类型守卫+接口（兼顾类型安全与运行时检测） #

先定义接口描述目标属性，再编写类型守卫函数实现运行时检测，同时获得TypeScript的编译时类型提示：

// 定义接口描述需要检测的属性
interface HasTitle {
  title?: string;
}

// 类型守卫函数：判断组件实例是否符合HasTitle接口
function hasTitle(component: unknown): component is HasTitle {
  return typeof component === 'object' && 
         component !== null && 
         Reflect.has(Object.getPrototypeOf(component), 'title');
}

// 使用示例
ngAfterViewInit() {
  const componentRef = this.componentContainer.createComponent(TestComponent);
  const instance = componentRef.instance;
  instance.text = 'text';

  if (hasTitle(instance)) {
    instance.title = 'title';
    this.changeDetectorRef.detectChanges();
  }
}

方案2：直接检查组件类的原型 #

Angular组件类的实例属性（即使仅声明类型）会被编译到类的原型上，因此可以直接检查组件构造函数的原型：

ngAfterViewInit() {
  const componentType = TestComponent;
  const componentRef = this.componentContainer.createComponent(componentType);
  const instance = componentRef.instance;
  instance.text = 'text';

  // 检查组件类原型是否包含目标属性
  if (Reflect.has(componentType.prototype, 'title')) {
    instance.title = 'title';
    this.changeDetectorRef.detectChanges();
  }
}

方案3：基于Angular组件元数据检测（适用于@Input属性） #

如果目标属性是组件的输入属性（标记了@Input()），可以通过Angular的组件工厂元数据来检测：

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

@Component({
  selector: 'my-app',
  template: `
    <p>App component</p>
    <ng-template #componentContainer></ng-template>
`,
})
export class AppComponent {
  @ViewChild('componentContainer', {read: ViewContainerRef}) componentContainer: ViewContainerRef;

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
    private cfr: ComponentFactoryResolver
  ) {}

  ngAfterViewInit() {
    const componentFactory = this.cfr.resolveComponentFactory(TestComponent);
    const componentRef = this.componentContainer.createComponent(componentFactory);
    const instance = componentRef.instance;
    instance.text = 'text';

    // 从组件输入元数据中检查是否存在目标属性
    if (componentFactory.inputs.some(input => input.propName === 'title')) {
      instance.title = 'title';
      this.changeDetectorRef.detectChanges();
    }
  }
}

内容的提问来源于stack exchange，提问作者Herman Fransen