typescript 将两个指令合并为一个指令

yrefmtwq  于 2023-01-18  发布在  TypeScript
关注(0)|答案(2)|浏览(121)

假设有两个预定义的指令dir1dir2(由第三方API提供,用户无法控制),假设它们可以应用于html元素,如下所示:

<div dir1="red" [dir2]="123">... My Content ...</div>

我发现自己在代码的几个地方使用了完全相同的绑定值来应用上述指令。为了避免重复,我想创建自己的自定义指令,命名为myDir,我可以这样应用它:

<div MyDir >... My Content ...</div>

这应该与在上面的示例中应用dir1dir2 * 完全 * 相同,即它将在其类中硬编码值"red"123
我尝试过像下面的plunker示例那样设置主机绑定,但这不起作用。
我的一个想法是,如果只有typescript有多个继承,那么我只需将MyDir类编写为Dir1 * 和 * Dir2的扩展。
我的问题是如何编写定制指令(MyDir)来实现预期用途?
请协助,谢谢!
https://plnkr.co/edit/W20Wvew326qsGfPU5H6v

lb3vh1jj

lb3vh1jj1#

**更新:**在2020年5月仍然不可能。它在Angular Team的特性积压工作中。在这里关注进展https://github.com/angular/angular/issues/8785

(TL; DR。有关我的黑客解决方案,请参见Plunker here

下面是我对这个问题的解决方案,如上所述。注意,这不是最通用的解决方案;在其他情况下,它的适应性很大程度上取决于所涉及指令的公共API的外观。当要组合的指令至少有ElementRef作为注入依赖项之一时,它应该能很好地工作,例如:

constructor(private elRef: ElementRef, /*...*/) { /*...*/ }

如果指令负责更改元素的样式,则很可能是这种情况。
我所做的就是,创建两个newDir1/Dir2对象,传入MyDirElementRef作为Dir1/Dir2的上下文,如下所示:

// inside MyDir constructor
this.d1 = new Dir1(this.elRef,  /*...*/);
this.d2 = new Dir2(this.elRef,  /*...*/);

然后,我将d1/d2的公共属性(@Input绑定)设置为我需要它们永久保持的值(以避免重复自己的操作):

//inside MyDir constructor
this.d1.dir1 = "red";
this.d2.dir2 = 123;

接下来,我所要做的就是将公共方法d1/d2MyDir进行匹配,方法是在后者的相应方法中调用前者的方法,例如:

ngAfterContentInit() {
  this.d1.ngAfterContentInit();
  this.d2.ngAfterContentInit();
}

这是把这些拼凑在一起的活塞

kuuvgm7e

kuuvgm7e2#

从Angular 15开始,您可以使用Directive composition API。您需要的是将指令添加到另一个指令
您的示例如下:

@Directive({
  hostDirectives: [Dir1, Dir2],
})
export class MyDir {
  dir1 = inject(Dir1, { self: true });
}

相关问题