乐趣区

关于angular:Angular-HostListener-装饰器的使用笔记

在 angular 中,通过不同的形式检测点击。因为 click 是一个事件,因而在组件外部它是通过简略的事件绑定来检测的。通过事件绑定在组件内进行检测的简略单击如下所示:

@Component({
selector: "geeks",
template: `
<h1 (click)="clicked()">{{ some_text}}</h1>
`
})
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: `
    <h1>{{some_text}}</h1>
`
})
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;">
    <h1>Outside Component</h1>
    <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;">
    <h1>Inner Component</h1>
    <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 内捕捉组件内部的点击。

退出移动版