angular HostListener_angular 事件处理_angular 教程_angular视频教程 - angular 指令教程_@hostlistener('click',

在 Angular 中，我们可以使用 HostListener 属性装饰器，实现元素的事件绑定。

指令的作用

该指令用于演示如何利用 HostListener 装饰器，监听用户的点击事件。

指令的实现

import { Directive, HostBinding, HostListener, Input } from '@angular/core'; 

@Directive({
    selector: '[greet]' }) export class GreetDirective { 

@Input() greet: string; 

@HostBinding() 

get innerText() { 

return this.greet;
   } @HostListener('click',['$event']) 
    onClick(event) { this.greet = 'Clicked!';
   }
}

指令的应用

import { Component } from '@angular/core'; 

@Component({
  selector: 'app-root',
  template: `
    <h2>Hello, Angular</h2>
    <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2>
  `,
}) 

export class AppComponent { }