在 Angular2 的指令或组件中使 @HostBinding 和 @HostListener 有条件

Posted 2023-02-22

【中文标题】在 Angular2 的指令或组件中使 @HostBinding 和 @HostListener 有条件

【英文标题】：Make @HostBinding and @HostListener conditional in a Directive or Component for Angular2

【发布时间】：2017-04-07 17:20:04

【问题描述】：

我有一个接受事件的指令：

<td calendarEvent [event]=event><td>

在指令内部，我有 HostBindings 用于添加基于事件的类，HostListeners 用于侦听 mouseenter 和 mouseleave 事件。例如：

@HostBinding('class.all-day') get eventIsAllDay() 
  if (this.event) return this.event.is_all_day;

许多<td>s 将有undefined 用于[event] 输入。有没有办法根据条件添加HostBinding 和HostListener？在每次更改检测时，它必须为每个 <td> 标签运行所有绑定和侦听器，即使是那些没有事件的标签。也许所需的计算能力可以忽略不计，但我确信每一点都会有所帮助，尤其是对于移动设备。

【参考方案1】：

没有办法有条件地添加这些。

您可以使用属性并绑定到该属性。使用属性进行更改检测比使用函数或 getter 更有效。

@HostBinding('class.all-day') 
eventIsAllDay:boolean = false;

set event(val) 
  this.event.is_all_day === val;

【讨论】：

我知道这是一个旧答案，但您可以使用“Renderer2”来“按需”收听某些内容。有关该主题的更多信息，请在此处查看我的评论：github.com/angular/angular/issues/7626#issuecomment-611991619