typescript - Angular hostDirectives API 在组合指令中无法正确传递 @Input 值

我在使用 Angular 的 hostDirectives API 时遇到了问题，特别是在尝试通过 @Input 在组合指令中传递值时。

我有一个独立的指令 PgcTypoDirective，它根据 @Input 值应用 CSS 类：

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

@Directive({
  selector: '[pgc-typo]',
  standalone: true,
})
export class PgcTypoDirective {
  @Input('pgc-typo')
  typography = '';

  @HostBinding('class')
  get className() {
    return `pgc-typo--${this.typography}`;
  }
}

然后，我创建了另一个指令 Heading1Directive，它使用 hostDirectives API 组合 PgcTypoDirective，并尝试向 pgc-typo 输入传递一个值：

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

@Directive({
  selector: '[heading-1]',
  standalone: true,
  hostDirectives: [
    {
      directive: PgcTypoDirective,
      inputs: ['pgc-typo: heading-1'],
    },
  ],
})
export class Heading1Directive {}

最后，我在一个组件中使用 Heading1Directive:

<h1 heading-1>
  This is a Heading 1 styled text.
</h1>

预期行为

我希望 PgcTypoDirective 接收值 'heading-1' 并将类 'pgc-typo--heading-1' 应用于该元素。

实际行为

我看到生成的类只是 'pgc-typo--'，而不是应用正确的类，这表明值 'heading-1' 并没有正确传递给 PgcTypoDirective。

这是 Angular 的 hostDirectives API 的预期行为吗？在 hostDirectives 中的 inputs 数组不应该正确映射并将这些值从 Heading1Directive 传递到 PgcTypoDirective 吗？还是有其他推荐的方法来确保在使用指令组合时正确传递 @Input 值？

编辑：解决方法

@Directive({
  selector: '[heading-1]',
  standalone: true,
  hostDirectives: [PgcTypoDirective],
})
export class RtlsHeading1Directive {
  readonly #pgcTypoDirective = inject(PgcTypoDirective);

  constructor() {
    this.#pgcTypoDirective.typography = 'heading-1';
  }
}

这个解决方法帮助我达到了预期的结果。已应用 'pgc-typo--heading-1' 类。

<h1 heading-1>
  This is a Heading 1 styled text.
</h1>

答案＃1

你没有为 pgc-typo 提供任何价值。

根据文档和示例，您在 inputs 中的“pgc-typo: heading-1”与“heading-1”是一个别名/变量，它将值传递给 pgc-typo 输入变量，但不会将“heading-1”文本作为值传递。

使用别名： 确保你像下面一样给 heading-1 属性赋值：

<h1 heading-1="heading-1">
  This is a Heading 1 styled text.
</h1>

或者

没有别名：您应该移除别名以避免混淆。

heading-1.directive.ts

@Directive({
  selector: '[heading-1]',
  standalone: true,
  hostDirectives: [
    {
      directive: PgcTypoDirective,
      inputs: ['pgc-typo'],
    },
  ],
})
export class Heading1Directive {}

<h1 pgc-typo="heading-1">
 This is a Heading 1 styled text.
</h1>

StackBlitz 演示