Angular自定义组件输入属性类型转换与构造函数断点问题咨询

断点未触发的原因 #

• 模板里传的字面量只是普通JavaScript对象，不是OurComponent或其子类的实例。Angular模板的类型检查仅在编译阶段生效，运行时不会自动把字面量转为类实例，所以构造函数根本没被调用，断点自然触发不了。
• Angular模板语法不允许直接用new关键字实例化类，你在模板里写new OurComponent1()的方式本身就无效，会直接报错。

解决方法 #

1. 在父组件TS代码中预实例化类 #

在父组件的TypeScript逻辑里提前创建类实例，再把实例传给子组件：

// 父组件TS文件
import { OurComponent1 } from './path/to/our-component1';

export class ParentComponent {
  // 在这里实例化子类，构造函数会执行，断点能触发
  compInstance = new OurComponent1(/* 构造函数有参数就传入对应值 */);
}

模板里直接绑定这个实例：

<!-- 父组件模板 -->
<our-custom-component [inputProp]="compInstance"></our-custom-component>

2. 在子组件中通过Setter转换字面量 #

如果必须传字面量，可以给子组件的@Input加Setter，在Setter里把字面量转为类实例：

// 子组件TS文件
import { OurComponent1, OurComponent2 } from './path/to/components';

export class OurCustomComponent {
  private _ourComp!: OurComponent;

  @Input() set ourComp(data: Partial<OurComponent> & { type?: 'comp1' | 'comp2' }) {
    if (!data) return;
    // 根据类型标识实例化对应子类
    switch (data.type) {
      case 'comp1':
        this._ourComp = Object.assign(new OurComponent1(), data);
        break;
      case 'comp2':
        this._ourComp = Object.assign(new OurComponent2(), data);
        break;
      default:
        this._ourComp = Object.assign(new OurComponent(), data);
    }
    // 此时构造函数已执行，断点会触发
  }

  get ourComp(): OurComponent {
    return this._ourComp;
  }
}

父组件传字面量时带上类型标识：

<!-- 父组件模板 -->
<our-custom-component [ourComp]="{ type: 'comp1', prop1: 'testValue' }"></our-custom-component>

3. 补充：用工厂函数统一处理实例化 #

如果子类较多，可写工厂函数封装实例化逻辑，避免Setter里冗余判断：

// 单独的工厂函数文件
export function createOurComponent(data: Partial<OurComponent> & { type?: string }): OurComponent {
  switch (data.type) {
    case 'comp1':
      return Object.assign(new OurComponent1(), data);
    case 'comp2':
      return Object.assign(new OurComponent2(), data);
    default:
      return Object.assign(new OurComponent(), data);
  }
}

子组件Setter里直接调用这个函数即可。

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