Angular4 @HostBinding @HostListener

发布时间：2020-12-17 10:39:14 所属栏目：安全来源：网络整理

导读：host属性 @Component({ selector: 'jhi-project', templateUrl: './project.html', styleUrls: [], host: { '(window:keydown)': 'keyboardIn ' } //绑定事件和方法 }) export class JhiProjectComponent { keyboardInput(event) { if (event.keyCode == 65

host属性

@Component({

selector: 'jhi-project',

templateUrl: './project.html',

styleUrls: [],

host: { '(window:keydown)': 'keyboardIn' } //绑定事件和方法

})

export class JhiProjectComponent {

keyboardInput(event) {

if (event.keyCode == 65 && event.ctrlKey) {

// ctrl + a

....

}

@HostListener

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

定义：

export ,args?: (eventName: ,args?:

应用：

import { Directive,HostListener } @Directive({
selector: 'button[counting]'
})
class CountClicks {
numberOfClicks = 0;

@HostListener(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;click</span><span style="color: #800000"&gt;'</span>,[<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;$event.target</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;])
onClick(btn: HTMLElement) {
    console.log(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;button</span><span style="color: #800000"&gt;'</span>,btn,<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;number of clicks:</span><span style="color: #800000"&gt;'</span>,<span style="color: #0000ff"&gt;this</span>.numberOfClicks++<span style="color: #000000"&gt;);
}

}

app.component.ts

import { Component} @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 } @Directive({
selector: '[exeHighlight]'
})
export class ExeHighlight {
constructor(private el: ElementRef,private renderer: Renderer) { }

@HostListener(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;document:click</span><span style="color: #800000"&gt;'</span>,[<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;$event</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;])
onClick(btn: Event) {
    </span><span style="color: #0000ff"&gt;if</span> (<span style="color: #0000ff"&gt;this</span>.el.nativeElement.contains(<span style="color: #0000ff"&gt;event</span><span style="color: #000000"&gt;.target)) {
        </span><span style="color: #0000ff"&gt;this</span>.highlight(<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;yellow</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;);
    } </span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt; {
        </span><span style="color: #0000ff"&gt;this</span>.highlight(<span style="color: #0000ff"&gt;null</span><span style="color: #000000"&gt;);
    }
}

highlight(color: </span><span style="color: #0000ff"&gt;string</span><span style="color: #000000"&gt;) {
    </span><span style="color: #0000ff"&gt;this</span>.renderer.setElementStyle(<span style="color: #0000ff"&gt;this</span>.el.nativeElement,<span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;backgroundColor</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;,color);
}

}

import {HostListener} @HostListener('window:keydown',['$event'])
onKeyDown(event: KeyboardEvent) {
...
}

app.component.ts

import { Component} @Component({
selector: 'exe-app',template:

 </span><h4 exeHighlight>点击该区域，元素会被高亮。点击其它区域，元素会取消高亮</h4><span style="color: #000000"&gt;

})
export class AppComponent {}

也可以在指定的metadata信息中，设定宿主元素的事件监听信息，示例：

counting.directive.ts

import { Directive } @Directive({
selector: 'button[counting]',host: {
'(click)': 'onClick($event.target)'
}
})
export class CountClicks {
numberOfClicks = 0;

onClick(btn: HTMLElement) {
    console.log(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;button</span><span style="color: #800000"&gt;'</span>,<span style="color: #0000ff"&gt;this</span>.numberOfClicks++<span style="color: #000000"&gt;);
}

}

@HostBinding

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

定义：

export ?: (hostPropertyName?:

应用：

@HostBindings() foo =

button-press.directive.ts

import { Directive,HostBinding,HostListener } @Directive({
selector: '[exeButtonPress]'
})
export class ExeButtonPress {
@HostBinding('attr.role') role = 'button';
@HostBinding('class.pressed') isPressed: boolean;

@HostListener(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;mousedown</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;) hasPressed() {
    </span><span style="color: #0000ff"&gt;this</span>.isPressed = <span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;;
}
@HostListener(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;mouseup</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;) hasReleased() {
    </span><span style="color: #0000ff"&gt;this</span>.isPressed = <span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;;
}

}

app.component.ts

import { Component } @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 } @Directive({
selector: '[exeButtonPress]',host: {
'role': 'button','[class.pressed]': 'isPressed'
}
})
export class ExeButtonPress {
isPressed: boolean;

@HostListener(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;mousedown</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;) hasPressed() {
    </span><span style="color: #0000ff"&gt;this</span>.isPressed = <span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;;
}
@HostListener(</span><span style="color: #800000"&gt;'</span><span style="color: #800000"&gt;mouseup</span><span style="color: #800000"&gt;'</span><span style="color: #000000"&gt;) hasReleased() {
    </span><span style="color: #0000ff"&gt;this</span>.isPressed = <span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;;
}

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!