Angular4 @HostBinding @HostListener
2024-09-28 03:21:19
host属性
@Component({
selector: 'jhi-project',
templateUrl: './project.html',
styleUrls: [],
host: { '(window:keydown)': 'keyboardInput($event)' } //绑定事件和方法
})
export class JhiProjectComponent {
keyboardInput(event) {
if (event.keyCode == 65 && event.ctrlKey) {
// ctrl + a
....
}
}
}
@HostListener
HostListener是属性装饰器，用来为宿主元素添加事件监听。
定义：
// HostListenerDecorator的定义
export interface HostListenerDecorator {
(eventName: string, args?: string[]): any;
new (eventName: string, args?: string[]): any;
}
应用：
// counting.directive.ts
import { Directive, HostListener } from '@angular/core'; @Directive({
selector: 'button[counting]'
})
class CountClicks {
numberOfClicks = ; @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 {}
以上代码运行结果：
此外，还可以监听宿主元素外，其他对象产生的事件，如windown或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);
}
}
import {HostListener} from '@angular/core';
@HostListener('window:keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
...
}
app.component.ts
import { Component} from '@angular/core';
@Component({
selector: 'exe-app',
template: `
<h4 exeHighlight>点击该区域，元素会被高亮。点击其它区域，元素会取消高亮</h4>
`
})
export class AppComponent {}
也可以在指定的metadata信息中，设定宿主元素的事件监听信息，示例：
counting.directive.ts
import { Directive } from '@angular/core';
@Directive({
selector: 'button[counting]',
host: {
'(click)': 'onClick($event.target)'
}
})
export class CountClicks {
numberOfClicks = ;
onClick(btn: HTMLElement) {
console.log('button', btn, 'number of clicks:', this.numberOfClicks++);
}
}
@HostBinding
HostBinding 是属性装饰器，用来动态设置宿主元素的属性值。
定义：
export interface HostBindingDecorator {
(hostPropertyName?: string): any;
new (hostPropertyName?: string): any;
}
应用：
@HostBindings('attr.foo') foo = 'bar'
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 { }
我们也可以在指令的 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;
}
}
最新文章
- SQL Tuning 基础概述07 - SQL Joins
- 3分钟干货学会使用node-inspector调试NodeJS代码
- .html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别
- python---Memcached
- 一个人的Scrum之准备工作
- mongodb基础用法
- date & dirname
- Redis中文显示为Unicode编码的解决办法
- bindiff 4.2使用
- OC - 3.OC的三大特性
- 【HDOJ】2546 饭卡
- 关于Android API的理解
- android网络监测
- 基于AXI4总线卷积FPGA加速IP核的尝试
- vue中自定义组件（插件）
- sql server 生成数据库字典 sql语句
- 【同余方程组】POJ1006 生理周期
- Java实训：实训一 ——长春职业技术学院 16级网络工程
- Nacos发布0.5.0版本，轻松玩转动态 DNS 服务
- 【手记】VSTO部署中的坑