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

Question

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

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

Answer 1

无法有条件地添加这些。

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

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

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

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

Make @HostBinding and @HostListener conditional in a Directive or Component for Angular2

angular2-directives

angular2-components

angular