#私藏项目实操分享# Angular @HostListener 装饰器的使用笔记
Posted JerryWang汪子熙
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#私藏项目实操分享# 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:
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;
在这个例子中,如果点击文本Outside Component
,那么显示的文本将是Event Triggered Outside Component
。 这显示了如何在 GeeksComponent 内捕获组件外部的点击。
以上是关于#私藏项目实操分享# Angular @HostListener 装饰器的使用笔记的主要内容,如果未能解决你的问题,请参考以下文章
#私藏项目实操分享# Angular Change Detection 的学习笔记
#私藏项目实操分享# 如何解决 Angular custom library module 在 ng build 时无法被识别的错误