将输入传递到组合Angular指令

发布于01月30日

我使用第三方指令"A"，它接受几个输入:a1、a2.

我想创建另一个指令"B"，它将成为指令"A"的外观，并为指令"A"指定一些特定值，这样我就不必在每次使用指令"A"时配置它的输入.这些值将由指令"B"定义/计算和封装.

因此，与其这样做，不如:

<div a a1="something" a2="somethingElse"></div>

我想做:

<div b></div>

我看到在Angular 15中有一个directive composition API.但我找不到一种方法来封装任何地方的底层指令输入.

创建包装器组件对我来说不起作用，因为我希望B正好是一个属性指令，这样它就不会创建不必要的DOM嵌套.

有什么方法可以实现我想要的吗？

推荐答案

让我们假设指令A具有以下代码:

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

@Directive({ selector: '[a]', standalone: true })
export class A implements OnInit {
  @Input() a1: string = '';
  @Input() a2: string = '';

  ngOnInit(): void {
    console.log('Logging in Directive A:');
    console.log({ a1: this.a1, a2: this.a2 });
  }
}

您可以在指令B中使用hostDirectives，并传递A's个输入的值:

import { Directive } from '@angular/core';
import { A } from './a.directive';

@Directive({ selector: '[b]', standalone: true, hostDirectives: [A] })
export class B {
  constructor(a: A) {
    a.a1 = 'a1 from directive B';
    a.a2 = 'a2 from directive B';
  }
}

而且您不会得到额外的DOM元素.

在StackBlitz上查看完整的示例