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

Question

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

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>

Answer 1

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

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

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

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

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

Answer 2

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

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

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

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