Angular 18超类用信号输入报TS-998110错误，求解决方案

方法1：给超类添加@Directive装饰器 #

Angular 18收紧了信号输入的使用规则，要求必须在@Component或@Directive装饰的类中定义。给你的DisplayComponent超类加上空的@Directive()装饰器就能解决问题，不需要额外配置元数据：

import { Directive, input } from '@angular/core';

@Directive()
export class DisplayComponent {
  name = input.required<string>();
}

@Component({
  selector: 'a-display',
  template: `<p>{{ name() }}</p>`
})
export class ADisplayComponent extends DisplayComponent {}

这样所有继承自DisplayComponent的子类都能正常使用name输入信号，完全不需要修改子类代码。

方法2：抽象类+注入器手动创建信号（无装饰器方案） #

如果不想给超类加装饰器，可以把超类设为抽象类，利用子类注入的Injector来手动初始化信号输入：

import { input, InputSignal, inject, Injector } from '@angular/core';

export abstract class DisplayComponent {
  name: InputSignal<string>;

  constructor() {
    const injector = inject(Injector);
    this.name = input.required<string>({ injector });
  }
}

@Component({
  selector: 'a-display',
  template: `<p>{{ name() }}</p>`
})
export class ADisplayComponent extends DisplayComponent {}

这种方式不需要修改超类的装饰器，但要确保子类能正确传递注入上下文，适合对超类结构有严格要求的场景。

方法3：复用输入定义的工具函数（备选） #

如果以上两种都不适用，可以封装一个工具函数来统一定义输入，子类调用函数减少重复代码：

import { input, InputSignal } from '@angular/core';

export function setupDisplayInputs() {
  return {
    name: input.required<string>()
  };
}

@Component({
  selector: 'a-display',
  template: `<p>{{ name() }}</p>`
})
export class ADisplayComponent {
  readonly { name } = setupDisplayInputs();
}

不过这种方式每个子类都需要调用函数，继承的便利性不如前两种。

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