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

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

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

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

但是，当我denfine

@HostListener

或

@HostBinding

时，它们都是针对相同的指令

PingDirective

你能单独定义它吗？对于以下结构，您可以侦听不同的span事件并定义css、

everySecond

或

everyTwoSeconds

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

每秒钟
每两秒钟

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

@Input

属性：

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

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

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

[timeout]=“1”

）

---

使用上述代码，您是在对Angular说，您的指令需要两个

输入

s，它们可以同时存在（并且两个变量都是真的），可以只存在一个，但是至少应该存在一个，否则，

@指令

选择器将与之不匹配

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

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

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

每秒钟
每两秒钟

---

你能告诉我更多细节吗？显然你可以用

if（this.everySecond）

和

if（this.everytwoses）

定义你的事件

boolean

变量形式

@Input（）everySecond

和

@Input（）everytwosed

？它是如何工作的？

将

每秒钟

设置为true何时需要设置为true或false？如何分别侦听它们的事件并定义css？谢谢！这是工作。但是，如何分别设置它们的css，比如通过

Renderer2

构造函数（私有渲染器：Renderer2）

是构建

everySecond

和

everytwoses

，可以单独定义？对不起，我的意思是像这样

如果（this.everySecond）{one=this.renderer；}否则如果（this.everytwosed）{two=this.renderer；}

，当我每秒钟点击

this.one

或

this.two

或两者都设置css时，我可以设置css吗？您不需要任何条件。直接访问this.elementRef.nativeElement将授予访问特定DOM元素的权限。请参阅stackblitzupdated中的

ping.directive.ts

第20行：