如何创建Angular @Input包装器？自定义InputSignal装饰器编译报错求助

问题分析 #

你遇到的NG8002: Can't bind to 'foo' since it isn't a known property of 'app-foo'错误，核心原因是Angular编译器无法识别自定义装饰器声明的输入属性。Angular通过组件内部的ɵcmp元数据（包含inputs数组）追踪可用输入，而你的初始实现仅创建了内部属性，未将公开的输入别名注册到这个元数据中。

解决方案 #

以下是完整的自定义@InputSignal装饰器实现，可解决编译器识别、自动调用信号set方法以及类型推断问题：

1. 实现InputSignal装饰器 #

import { Input, ɵComponentType } from '@angular/core';
import { WritableSignal } from '@angular/core';

export function InputSignal(...args: Parameters<typeof Input>): PropertyDecorator {
  return (target: any, key: string | symbol) => {
    const keyStr = String(key);
    // 解析输入别名（支持@Input('alias')或@Input({ alias: 'alias' })格式）
    const inputAlias = getAlias(args) ?? keyStr;

    // 初始化组件内部元数据（ɵcmp是Angular组件的核心元数据结构）
    if (!target.constructor.ɵcmp) {
      target.constructor.ɵcmp = {} as ɵComponentType<any>;
    }
    const cmpMeta = target.constructor.ɵcmp;
    cmpMeta.inputs = cmpMeta.inputs || [];
    
    // 将输入别名注册到编译器识别的列表中
    if (!cmpMeta.inputs.includes(inputAlias)) {
      cmpMeta.inputs.push(inputAlias);
    }

    // 创建内部setter属性，用于接收输入值并转发给信号
    const internalKey = `__${inputAlias}`;
    Object.defineProperty(target, internalKey, {
      set(value: unknown) {
        const signal = this[keyStr] as WritableSignal<unknown>;
        // 确保信号实例存在且有set方法
        if (signal && typeof signal.set === 'function') {
          signal.set(value);
        }
      },
      enumerable: false,
      configurable: true
    });

    // 为内部属性应用原生@Input装饰器
    const inputDecorator = Input(inputAlias) as PropertyDecorator;
    inputDecorator(target, internalKey);
  };
}

// 辅助函数：提取@Input的别名参数
function getAlias([alias]: Parameters<typeof Input>): string | undefined {
  if (!alias) return undefined;
  if (typeof alias === 'string') return alias;
  return alias.alias;
}

2. 组件中使用@InputSignal #

import { Component, signal } from '@angular/core';
import { InputSignal } from './input-signal';

@Component({
  selector: 'app-foo',
  standalone: true,
  template: `<p>当前值：{{ foo() }}</p>`
})
export class FooComponent {
  // 自动绑定输入到信号，编译器识别输入类型为number
  @InputSignal() foo = signal(0);
}

3. 类型推断优化（可选） #

如果需要更精确的类型支持，可添加泛型定义，让LSP和编译器自动推断输入类型为信号的泛型类型：

import { Input, ɵComponentType } from '@angular/core';
import { WritableSignal } from '@angular/core';

type InputSignalDecorator = {
  <T>(): PropertyDecorator;
};

export const InputSignal: InputSignalDecorator = (...args: Parameters<typeof Input>) => {
  return (target: any, key: string | symbol) => {
    const keyStr = String(key);
    const inputAlias = getAlias(args) ?? keyStr;

    if (!target.constructor.ɵcmp) {
      target.constructor.ɵcmp = {} as ɵComponentType<any>;
    }
    const cmpMeta = target.constructor.ɵcmp;
    cmpMeta.inputs = cmpMeta.inputs || [];
    if (!cmpMeta.inputs.includes(inputAlias)) {
      cmpMeta.inputs.push(inputAlias);
    }

    const internalKey = `__${inputAlias}`;
    Object.defineProperty(target, internalKey, {
      set(value: unknown) {
        const signal = this[keyStr] as WritableSignal<unknown>;
        if (signal && typeof signal.set === 'function') {
          signal.set(value);
        }
      },
      enumerable: false,
      configurable: true
    });

    const inputDecorator = Input(inputAlias) as PropertyDecorator;
    inputDecorator(target, internalKey);
  };
};

function getAlias([alias]: Parameters<typeof Input>): string | undefined {
  if (!alias) return undefined;
  if (typeof alias === 'string') return alias;
  return alias.alias;
}

关键细节说明 #

• 元数据注册：通过操作组件的ɵcmp.inputs数组，让Angular编译器识别公开的输入别名（如foo），直接解决NG8002错误。
• 信号转发逻辑：创建内部setter属性接收输入值，自动调用目标信号的set方法，彻底消除手动编写重复setter的繁琐代码。
• 类型支持：利用TypeScript的类型推断特性，让编译器自动识别输入类型为信号的泛型类型（如signal(0)对应输入类型number），保证LSP智能提示正常工作。

注意事项 #

• 依赖Angular内部的ɵcmp元数据结构，该结构在稳定版本中兼容性良好，但Angular大版本更新时可能需要微调。
• 同时支持独立组件和NgModule声明的组件，无需额外配置。

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