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

Question

本文描述了如何在同一个指令中实现多个选择器:

https://www . benna del . com/blog/3367-matching-multiple-selectors-on-the-same-element-create-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或@HostB的时，两者都是针对相同的指令平指令。

能单独定义一下吗？到下面的结构，你可以监听不同的span事件并定义css，< code>everySecond或< code > everytwosseconds 。

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

Answer 1

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

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

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

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

使用上面的代码，您向 Angular 说您希望您的指令有两个 Input s，它们可以同时存在（并且两个变量都是真的），只能存在一个，但至少应该存在一个，否则@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