如何用Angular指令组合API封装第三方指令A为属性指令B？

你可以通过Angular的指令组合API（Directive Composition API），结合hostDirectives配置实现需求，完全不会产生额外DOM嵌套。以下是两种可行的实现方式：

方式1：静态默认值配置（适用于固定输入值） #

直接在指令B的hostDirectives配置中，为第三方指令A指定输入值的默认值：

import { Directive } from '@angular/core';
import { ADirective } from '第三方指令路径';

@Directive({
  selector: '[b]',
  hostDirectives: [
    {
      directive: ADirective,
      inputs: {
        a1: "'something'", // 字符串值需额外添加单引号
        a2: "'somethingElse'"
      }
    }
  ]
})
export class BDirective {}

使用时只需写<div b></div>，Angular会自动将指令A应用到该元素，并设置好a1和a2的默认值。

方式2：动态计算赋值（适用于需要逻辑处理的输入值） #

如果a1、a2的值需要动态计算或依赖其他逻辑，可以通过注入指令A的实例，在指令B的生命周期钩子中赋值：

import { Directive, OnInit } from '@angular/core';
import { ADirective } from '第三方指令路径';

@Directive({
  selector: '[b]',
  hostDirectives: [ADirective] // 引入第三方指令A
})
export class BDirective implements OnInit {
  constructor(private aDirective: ADirective) {}

  ngOnInit(): void {
    // 这里可加入任意计算逻辑
    const computedA1 = 'something'; // 示例固定值，可替换为动态计算逻辑
    const computedA2 = 'somethingElse';

    // 为指令A的输入属性赋值
    this.aDirective.a1 = computedA1;
    this.aDirective.a2 = computedA2;
  }
}

这种方式支持更灵活的逻辑处理，比如根据组件上下文、服务数据动态生成输入值。

额外扩展：允许外部覆盖输入值 #

如果需要偶尔允许外部覆盖默认的a1或a2，可以给指令B添加输入属性，在赋值时优先使用外部传入的值：

import { Directive, Input, OnInit } from '@angular/core';
import { ADirective } from '第三方指令路径';

@Directive({
  selector: '[b]',
  hostDirectives: [ADirective]
})
export class BDirective implements OnInit {
  @Input() overrideA1?: string;
  @Input() overrideA2?: string;

  constructor(private aDirective: ADirective) {}

  ngOnInit(): void {
    this.aDirective.a1 = this.overrideA1 ?? 'something';
    this.aDirective.a2 = this.overrideA2 ?? 'somethingElse';
  }
}

使用时可以选择性覆盖：<div b [overrideA1]="customValue"></div>

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