#私藏项目实操分享# Angular @HostListener装饰器的使用笔记 _的使用

男儿欲遂平生志，六经勤向窗前读。这篇文章主要讲述#私藏项目实操分享# Angular @HostListener装饰器的使用笔记相关的知识，希望能为你提供帮助。
在 angular 中，通过不同的方式检测点击。由于 click 是一个事件，因此在组件内部它是通过简单的事件绑定来检测的。通过事件绑定在组件内进行检测的简单单击如下所示：

@Component( selector: "geeks", template: ` some_text ` ) export class GeeksComponent constructor() some_text = "Click Here"; clicked() this.some_text = "Event Triggered";

为了继续检测组件外的点击，@HostListener 装饰器在 angular 中使用。它是一个装饰器，它声明一个要侦听的 DOM 事件，并提供一个带有处理程序方法的链接，以便在该事件发生时运行。
方法：这里的方法是使用@HostListener 装饰器。在 angular 中，它是一个装饰器，有助于捕获 DOM 内发生的任何类型的事件，并为开发人员提供基于该事件执行任何操作的灵活性。在这里，在简单的点击事件上，处理程序将把点击事件引用到组件上，对于整个 DOM 的点击，它将使用 document:click 捕获。
使用 HostListener 的语法如下：

@HostListener(events, args) handler_name(args) // Do something

HostListener的语法有三点需要注意：
(1) eventName：顾名思义，它接收 DOM 中需要监听的事件的名称。
(2) args：这些是在事件发生时传递给处理程序方法的参数集。它以列表格式输入。
(3) handlen_name：这里是事件触发时调用的方法定义。它由 HostListener 自动调用。
示例：在组件内绑定单击
为了在组件内绑定单击事件，将 hostListener 的 eventName 维护成值 “click”。在这种情况下，上面的
代码将写为：

@Component( selector: "geeks", template: ` some_text ` ) export class GeeksComponent constructor() some_text = "Click Here"; @HostListener("click") clicked() this.some_text = "Event Triggered";

点击 Click here，屏幕将显示：
Event Triggered:

#私藏项目实操分享# Angular @HostListener装饰器的使用笔记

文章图片

Bind with click outside component为了检测组件外的点击，需要查看另一个事件。这里的 click 将不起作用，因为它检测到组件内的点击。这里的关键是在DOM中寻找点击，而不仅仅是组件，因此document:click将是正确的选择，同时我们需要过滤掉组件内的事件，这是由布尔变量 inside 完成的。
所以在下面给出的代码中，将添加另一个组件作为外部上下文，但是单击它会导致当前组件上的单击事件。

@Component( selector: "another", template: ` < div style="border-style: solid; margin:5px; "> Outside Component < h2> Click here for outer component trigger< /h2> < /div> < geeks> < /geeks> ` ) export class AnotherComponent constructor() @Component( selector: "geeks", template: ` < div style="border-style:solid; margin:5px; "> Inner Component < h2> some_text < /h2> < /div> ` ) export class GeeksComponent constructor() some_text = "Click Here"; inside = false; @HostListener("click") clicked() this.inside = true; @HostListener("document:click") clickedOut() this.some_text = this.inside ? "Event Triggered" : "Event Triggered Outside Component"; this.inside = false;

【#私藏项目实操分享# Angular @HostListener装饰器的使用笔记】在这个例子中，如果点击文本Outside Component，那么显示的文本将是Event Triggered Outside Component。这显示了如何在 GeeksComponent 内捕获组件外部的点击。