角度2：ホストバインドとホストリスニング

Question

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(){ 
    } 
} 

Answer 1

@HostListenerは、コールバック/イベントハンドラメソッドのデコレータであるので、この行の末尾に;を削除します。ここでは

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

は、作業ですplunker私はAPI docsからコードをコピーして生成しましたが、わかりやすくするために同じ行に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(); } 
} 

：

To listen to global events, a target must be added to the event name. The target can be window, document or body (reference)

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

Answer 2

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

Rajcok Sを@マークするコメントに@BhaRathi RajaManiで述べたように;を削除答え

Answer 3

これは、両方を使用する単純な例です。

import { 指令、HostListener、HostBinding } '@ angular/core'からの ;

@Directive({ 
    selector: '[Highlight]' 
}) 
export class HighlightDirective { 
    @HostListener('mouseenter') mouseover() { 
    this.backgroundColor = 'green'; 
    }; 

    @HostListener('mouseleave') mouseleave() { 
    this.backgroundColor = 'white'; 
    } 

    @HostBinding('style.backgroundColor') get setColor() { 
    return this.backgroundColor; 
    }; 

    private backgroundColor = 'white'; 
    constructor() {} 

} 

紹介：

1. HostListenerは、要素にイベントをバインドすることができます。
2. HostBindingは、要素にスタイルをバインドできます。

3. これはディレクティブですので、我々は

   いくつかのテキストのためにそれを使用することができます

4. ので、デバッグによると、私たちはこのdiv要素が スタイル=バインドされていることを見つけることができる「背景色を：白」

   一部のテキスト

5. このdivのEventListenerには、mouseenterとmouseleaveの2つのイベントがあります。だから私たちがdivにマウスを動かすと、色は緑色になり、マウスが離れると色は白くなります。