Angular指令组合添加组件时@Input被忽略问题求助

你遇到的问题核心是：hostDirectives.inputs仅负责将指令的@Input映射到组件的宿主绑定（让父组件可以像给组件自身传参一样绑定这个属性），但不会在组件类上自动生成对应的属性成员，所以TypeScript和组件模板都会找不到这个属性。

以下是两种不需要重复声明@Input的解决方法：

方法一：通过@Host注入指令实例，模板直接访问指令属性 #

在组件类中注入指令实例，模板里通过实例访问属性：

@Directive({
  standalone: true,
})
export class CompositionTestDirective {
  @Input() dataProperty?: string;
}

@Component({
  selector: 'app-composition-test',
  standalone: true,
  template: `<h1> {{testDir.dataProperty}} </h1>`,
  hostDirectives: [
    {
      directive: CompositionTestDirective,
      inputs: ['dataProperty'],
    },
  ],
})
export class CompositionTestComponent {
  constructor(@Host() public testDir: CompositionTestDirective) {}
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CompositionTestComponent],
  template: `
    <app-composition-test [dataProperty]="property"/>
  `,
})
export class App {
  property = 'It works!';
}

注：要把注入的指令实例设为public，才能在模板中访问。

方法二：用getter代理指令属性（保持模板语法不变） #

如果想保留模板里{{dataProperty}}的写法，可以在组件类中添加getter，代理指令的属性：

@Directive({
  standalone: true,
})
export class CompositionTestDirective {
  @Input() dataProperty?: string;
}

@Component({
  selector: 'app-composition-test',
  standalone: true,
  template: `<h1> {{dataProperty}} </h1>`,
  hostDirectives: [
    {
      directive: CompositionTestDirective,
      inputs: ['dataProperty'],
    },
  ],
})
export class CompositionTestComponent {
  constructor(@Host() private testDir: CompositionTestDirective) {}

  get dataProperty() {
    return this.testDir.dataProperty;
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CompositionTestComponent],
  template: `
    <app-composition-test [dataProperty]="property"/>
  `,
})
export class App {
  property = 'It works!';
}

为什么会出现这个错误？ #

• Angular的hostDirectives.inputs只是做了绑定映射：当父组件给<app-composition-test [dataProperty]="...">传值时，Angular会把值转发给指令的dataProperty输入，但这个过程不会在组件类上添加dataProperty成员。
• 组件模板的默认上下文是组件实例，直接写dataProperty会去组件类中查找，而不是自动关联到注入的指令实例，因此TypeScript会抛出“属性不存在”的错误。

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