Angular 2 HostListener & HostBinding-白红宇

Angular 2 HostListener & HostBinding

阅读量：6436 次

发布时间：2019-06-23

本文共 4061 字，大约阅读时间需要 13 分钟。

阅读 Angular 6/RxJS 最新教程，请访问

Host Element

在介绍 HostListener 和 HostBinding 属性装饰器之前，我们先来了解一下 host element (宿主元素)。

宿主元素的概念同时适用于指令和组件。对于指令来说，这个概念是相当简单的。应用指令的元素，就是宿主元素。假设我们已声明了一个 HighlightDirective 指令 (selector: '[exeHighlight]')：

高亮的文本

上面 html 代码中，p 元素就是宿主元素。如果该指令应用于自定义组件中如：


        
     高亮的文本

此时 exe-counter 自定义元素，就是宿主元素。

HostListener

HostListener 是属性装饰器，用来为宿主元素添加事件监听。

HostListenerDecorator 装饰器定义

export interface HostListenerDecorator {    (eventName: string, args?: string[]): any;    new (eventName: string, args?: string[]): any;}

HostListenerDecorator 装饰器应用

counting.directive.ts

import { Directive, HostListener } from '@angular/core';@Directive({    selector: 'button[counting]'})class CountClicks {    numberOfClicks = 0;    @HostListener('click', ['$event.target'])    onClick(btn: HTMLElement) {        console.log('button', btn, 'number of clicks:', this.numberOfClicks++);    }}

app.component.ts

import { Component} from '@angular/core';@Component({  selector: 'exe-app',  styles: [`    button {      background: blue;      color: white;      border: 1px solid #eee;    }  `],  template: `      `})export class AppComponent {}

以上代码运行后浏览器显示的结果：

图片描述

此外，我们也可以监听宿主元素外，其它对象产生的事件，如 window 或 document 对象。具体示例如下：

highlight.directive.ts

import { Directive, HostListener, ElementRef, Renderer } from '@angular/core';@Directive({    selector: '[exeHighlight]'})export class ExeHighlight {    constructor(private el: ElementRef, private renderer: Renderer) { }    @HostListener('document:click', ['$event'])    onClick(btn: Event) {        if (this.el.nativeElement.contains(event.target)) {            this.highlight('yellow');        } else {            this.highlight(null);        }    }    highlight(color: string) {        this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);    }}

app.component.ts

import { Component} from '@angular/core';@Component({  selector: 'exe-app',  template: `    点击该区域，元素会被高亮。点击其它区域，元素会取消高亮
  `})export class AppComponent {}

以上代码运行后浏览器显示的结果：

图片描述

Host Event Listener

我们也可以在指令的 metadata 信息中，设定宿主元素的事件监听信息，具体示例如下：

counting.directive.ts

import { Directive } from '@angular/core';@Directive({    selector: 'button[counting]',    host: {      '(click)': 'onClick($event.target)'    }})export class CountClicks {    numberOfClicks = 0;    onClick(btn: HTMLElement) {        console.log('button', btn, 'number of clicks:', this.numberOfClicks++);    }}

HostBinding

HostBinding 是属性装饰器，用来动态设置宿主元素的属性值。

HostBinding 装饰器定义

export interface HostBindingDecorator {    (hostPropertyName?: string): any;    new (hostPropertyName?: string): any;}

HostBinding 装饰器应用

button-press.directive.ts

import { Directive, HostBinding, HostListener } from '@angular/core';@Directive({    selector: '[exeButtonPress]'})export class ExeButtonPress {    @HostBinding('attr.role') role = 'button';    @HostBinding('class.pressed') isPressed: boolean;    @HostListener('mousedown') hasPressed() {        this.isPressed = true;    }    @HostListener('mouseup') hasReleased() {        this.isPressed = false;    }}

app.component.ts

import { Component } from '@angular/core';@Component({  selector: 'exe-app',  styles: [`    button {      background: blue;      color: white;      border: 1px solid #eee;    }    button.pressed {      background: red;    }  `],  template: `      `})export class AppComponent { }

以上代码运行后浏览器显示的结果：

图片描述

Host Property Bindings

我们也可以在指令的 metadata 信息中，设定宿主元素的属性绑定信息，具体示例如下：

button-press.directive.ts

import { Directive, HostListener } from '@angular/core';@Directive({    selector: '[exeButtonPress]',    host: {      'role': 'button',      '[class.pressed]': 'isPressed'    }})export class ExeButtonPress {    isPressed: boolean;    @HostListener('mousedown') hasPressed() {        this.isPressed = true;    }    @HostListener('mouseup') hasReleased() {        this.isPressed = false;    }}