角指令多个选择器和@HostListener，@HostBinding

Posted 2023-03-13

【中文标题】角指令多个选择器和@HostListener，@HostBinding

【英文标题】：angular directive multiple selectors and @HostListener, @HostBinding

【发布时间】：2019-03-28 14:32:21

【问题描述】：

本文介绍了如何在同一个指令中实现多个选择器：

https://www.bennadel.com/blog/3367-matching-multiple-selectors-on-the-same-element-creates-a-single-directive-instance-in-angular-5-0-0.htm

@Directive(
    selector: "[everySecond] , [everyTwoSeconds]",
    outputs: [
        "everySecond",
        "everyTwoSeconds"
    ]
)
export class PingDirective implements OnInit, OnDestroy 
   @HostListener('mouseleave') mouseleave(e:Event)
   @HostBinding('background-color') backgroundColor: string;

但是当我定义 @HostListener 或 @HostBinding 时，两者都是针对同一指令 PingDirective。

你能单独定义吗？对如下结构，可以监听不同的span事件，定义css，everySecond或everyTwoSeconds。

<span everySecond> 
 everySecond 
 <span everyTwoSeconds>
 everyTwoSeconds
 </span>
</span>

【参考方案1】：

也许您可以定义另一个输入，即 atype='events' 或 atype='css'。

根据输入类型，您可以处理点击事件并定义 CSS 属性。

<span everySecond="true" atype="events"> 
 everySecond 
 <span everyTwoSeconds atype="css">
 everyTwoSeconds
 </span>
</span>

https://stackblitz.com/edit/angular-nwobuk

【讨论】：

谢谢！它的工作。但是，如何单独设置他们的css，比如Renderer2。

constructor(private renderer: Renderer2) 同时构建了everySecond 和everyTwoSeconds，可以单独定义吗？

对不起，我的意思是这样if (this.everySecond) one = this.renderer; else if(this.everytwoSecond) two = this.renderer;，当我点击everySecond时，我可以为this.one或this.two或两者设置css吗？

你不需要任何条件。直接访问 this.elementRef.nativeElement 将允许访问特定的 DOM 元素。参考stackblitz

在ping.directive.ts 第 20 行更新：stackblitz.com/edit/…

【参考方案2】：

是的，你可以。只需为指令的每个选择器定义一个 @Input 属性：

export class PingDirective 
   @Input() everySecond: boolean;
   @Input() everyTwoSeconds: boolean;

   ngOnInit() 
     if (this.everySecond) console.log('every second!');
   

这是可行的，因为 Angular 允许您为指令定义 Input properties。输入属性的名称也可以与您的选择器相同（通过这种方式，您可以将数据传递给您的指令，例如[timeout]="1" 用于带有selector: '[timeout]' 的指令）。

使用上面的代码，你对 Angular 说你希望你的指令有两个 Input s，它们都可以存在（并且两个变量都为真），可以只存在一个，但是 在至少应该存在一个，否则@Directive 选择器不会匹配它

【讨论】：

你能给我更多的细节吗？

显然您可以使用if (this.everySecond) 和if (this.everyTwoSeconds) 定义您的事件

boolean var 形式 @Input() everySecond 和 @Input() everyTwoSecond 是什么？它是如何工作的？

<span [everySecond]> 将everySecond 设为真

什么时候需要给它true或false？如何分别监听它们的事件，并定义css？