Angular 15：如何从HostDirective获取组件数据？指令组合API问询

当然可以实现，以下是几种实用的方案：

方案1：直接通过宿主指令实例访问输入值 #

当组件通过hostDirectives引入指令时，指令实例会注入到组件中，你可以通过@Host装饰器获取该实例，进而访问其输入属性：

首先定义指令：

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

@Directive({
  selector: '[colorConfig]',
  standalone: true
})
export class ColorConfigDirective {
  @Input() colorName!: string;
}

然后在组件中注入指令实例并访问：

import { Component, Host, OnInit } from '@angular/core';
import { ColorConfigDirective } from './color-config.directive';

@Component({
  selector: 'my-icon',
  standalone: true,
  hostDirectives: [ColorConfigDirective],
  template: `<span>当前图标颜色：{{ colorConfig.colorName }}</span>`
})
export class MyIconComponent implements OnInit {
  constructor(@Host() private colorConfig: ColorConfigDirective) {}

  ngOnInit() {
    // 在组件逻辑中访问指令的输入值
    console.log('指令传入的颜色值：', this.colorConfig.colorName);
  }
}

使用组件时直接传递指令输入：

<my-icon [colorName]="'deepblue'"></my-icon>

方案2：将指令输入映射为组件输入 #

如果希望对外暴露组件自身的输入属性，而非指令的输入，可以在组件中定义同名输入并同步到指令实例：

import { Component, Host, Input } from '@angular/core';
import { ColorConfigDirective } from './color-config.directive';

@Component({
  selector: 'my-icon',
  standalone: true,
  hostDirectives: [ColorConfigDirective],
  template: `<span>当前图标颜色：{{ colorName }}</span>`
})
export class MyIconComponent {
  @Input() 
  set colorName(value: string) {
    this.colorConfig.colorName = value;
  }

  get colorName(): string {
    return this.colorConfig.colorName;
  }

  constructor(@Host() private colorConfig: ColorConfigDirective) {}
}

这种方式下，组件自身可以直接使用colorName，同时也会同步给内部的指令。

方案3：通过hostDirectives配置映射输入 #

你还可以在hostDirectives的配置项中直接完成输入属性的映射，将组件的输入映射到指令的对应输入：

import { Component, Input } from '@angular/core';
import { ColorConfigDirective } from './color-config.directive';

@Component({
  selector: 'my-icon',
  standalone: true,
  hostDirectives: [
    {
      directive: ColorConfigDirective,
      inputs: ['colorName: iconColor'] // 组件的iconColor输入 → 指令的colorName输入
    }
  ],
  template: `<span>当前图标颜色：{{ iconColor }}</span>`
})
export class MyIconComponent {
  @Input() iconColor!: string;
}

使用组件时传递组件自身的输入：

<my-icon [iconColor]="'crimson'"></my-icon>

这种方式可以实现组件输入与指令输入的解耦，对外暴露更贴合组件语义的输入名称。

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