角色2：主機繫結和主機偵聽

如何使用主機偵聽器和主機繫結在angularjs 2？

我嘗試這樣做主機監聽器,但總是顯示“宣告預期”錯誤.

app.component.ts：

import {Component, EventEmitter, HostListener, Directive} from 'angular2/core';

@Directive({
selector: 'button[counting]'
})

class HostSample {
public click = new EventEmitter();
@HostListener('click', ['$event.target']);
onClickBtn(btn){
alert('host listener');
}
}

@Component({
selector: 'test',
template: '<button counting></button>',
directives: [HostSample]
})

export class AppComponent {
constructor(){
}
}

@HostListener('click', ['$event.target']);

這是通過複製ofollow,noindex" target="_blank">API docs 中的程式碼生成的plunker ,但是為了清楚起見,我將onClick()方法放在同一行上：

import {Component, HostListener, Directive} from 'angular2/core';

@Directive({selector: 'button[counting]'})
class CountClicks {
numberOfClicks = 0;
@HostListener('click', ['$event.target']) onClick(btn) {
console.log("button", btn, "number of clicks:", this.numberOfClicks++);
}
}
@Component({
selector: 'my-app',
template: `<button counting>Increment</button>`,
directives: [CountClicks]
})
export class AppComponent {
constructor() { console.clear(); }
}

主機繫結也可以用來監聽全域性事件. “要聽全球事件,必須在事件名稱中新增一個目標,目標可以是視窗,文件或正文”(reference )：

@HostListener('document:keyup', ['$event'])
handleKeyboardEvent(kbdEvent: KeyboardEvent) { ... }