Angular hostDirectives API组合指令中@Input值传递异常问题

问题场景 #

在使用Angular的hostDirectives API组合指令时，遇到@Input值无法正确传递的问题：

1. 定义独立指令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}`;
  }
}

2. 创建组合指令Heading1Directive，尝试通过hostDirectives的inputs映射传递固定值：

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

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

3. 模板中使用组合指令：

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

预期结果 #

PgcTypoDirective应接收到值'heading-1'，元素应用CSS类pgc-typo--heading-1。

实际结果 #

元素仅应用类pgc-typo--，说明值未成功传递。

原因解析 #

你使用的inputs数组语法['pgc-typo: heading-1']的作用是：将宿主元素上heading-1输入属性的动态值，传递给PgcTypoDirective的pgc-typo输入。但你的用法中<h1 heading-1>只是作为指令选择器标记，并未给heading-1赋值，因此传递的是空字符串，不符合你需要固定传递'heading-1'的需求。

正确解决方案 #

方案1：直接指定固定输入值（Angular 16+） #

在hostDirectives配置中，使用对象语法直接为目标指令的输入属性设置固定值：

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

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

此方式会直接将固定值'heading-1'赋值给PgcTypoDirective的pgc-typo输入属性，无需在模板中额外赋值。

方案2：注入指令实例赋值（优化临时解法） #

沿用你临时解法的思路，改用Angular生命周期钩子ngOnInit替代构造函数赋值，更符合框架规范：

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

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

  ngOnInit(): void {
    this.#pgcTypoDirective.typography = 'heading-1';
  }
}

总结 #

• 若需给组合指令传递固定值：使用hostDirectives的inputs对象语法（{ '目标输入名': '固定值' }）。
• 若需传递动态外部值：使用数组语法['目标输入名: 宿主输入名']，并在模板中为宿主输入属性赋值（如<h1 heading-1="custom-text">）。

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