Angular 2 HostListener & HostBinding
来源:互联网 发布:电脑群发短信的软件 编辑:程序博客网 时间:2024/06/02 07:05
1. Host Element
在介绍hostListener与hostBinding之前先介绍一下---宿主元素:
宿主元素的概念同时适用于指令和组件。对于指令来说,这个概念是相当简单的。应用指令的元素,就是宿主元素。假设我们已声明了一个 HighlightDirective 指令 (selector: '[exeHighlight]'):
<p exeHighlight> <span>高亮的文本</span></p>
上面 html 代码中,
p
元素就是宿主元素。如果该指令应用于自定义组件中如:<exe-counter exeHighlight> <span>高亮的文本</span></exe-counter>此时
exe-counter
自定义元素,就是宿主元素。2. 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: ` <button counting>增加点击次数</button> `})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
3. 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++); }}
4.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: ` <button exeButtonPress>按下按钮</button> `})export class AppComponent { }
5.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; }}
1.宿主元素属性和事件绑定风格指南
优先使用 @HostListener 和 @HostBinding ,而不是 @Directive 和 @Component 装饰器的 host 属性:
对于关联到 @HostBinding
的属性或关联到 @HostListener
的方法,要修改时,只需在指令类中的一个地方修改。 如果使用元数据属性host
,你就得在组件类中修改属性声明的同时修改相关的元数据。
- Angular 2 HostListener & HostBinding
- Angular 2 HostListener & HostBinding
- angular 事件绑定/属性绑定 @HostListener ,@HostBinding
- angular2 HostListener
- Angular 学习笔记 2
- Angular 2模板语法
- Angular路由2
- Angular入门2
- Angular 2 路由
- Angular 2 Form表单
- Angular 2 - DI
- Angular学习2
- Transclusion in Angular 2
- angular基础2
- Angular 2 架构概览
- Angular 2 学习
- Angular 2 Form表单
- Angular 2 路由
- ZOJ 1610 线段树
- OJ题目:雇佣兵
- css做正八边形
- 【MySQL】锁——查看当前数据库锁请求的三种方法
- js 鼠标单击多行文本框时怎样将光标定在文本框最前面
- Angular 2 HostListener & HostBinding
- sphinx增量索引和主索引来实现索引的实时更新
- dubbo+zookeeper,传输数据超时问题
- Laravel 5 性能优化
- 对于具体化的查询结果,不支持该方法
- BP神经网络:图片的分割和规范化:《Python》系列。
- 图像检索系统《Deep Learning of Binary Hash Codes for Fast Image Retrieval》
- big data Index
- 学习一策略模式(strategy)