Question

我在一个指令中使用@HostListener，该指令将API调用返回的DOM附加到DOM。

所需的行为是事件仅绑定到指令内已分配的元素，而不是整个文档（请参阅Angular2, HostListener, how can I target an element? can I target based on class? ）。

当一个事件被触发时，我想检查元素的类型和类，以决定该做什么：

@HostListener('click', ['$event']) onClick(event) {
// check if it is an internal link 
if (event.toElement.nodeName.toLowerCase() == 'a' && event.toElement.className.toLowerCase() == "internal_link") {
   console.log("internal link to: " + event.toElement.href);

    // preventDefault (propagation)
    return false;
} else {
    return;
}

}

这种方法的不好之处在于我无法过滤之前绑定的元素（我不想直接访问DOM，因为使用全局事件目标可能会发生冲突使用由Angular自己创建的HTML）。另外，在文档中不鼓励使用本机DOM函数：https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#respond-to-user-initiated-events我从文档中了解到@HostListener是绑定Angular2中事件的首选方法（该指令负责分配给Angular2的元素） DOM及其上定义的事件。）

有没有更好的方法来实现我想要实现的不涉及手动访问DOM的方法？

仅对某些元素使用@HostListener（无需手动事件绑定）

0 个答案: