angular HostListener_angular 事件处理_angular 教程_angular视频教程 - angular 指令教程

转载自 http://www.ngui.cc/news/show-128.html

在 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 { }