angle-2の入力フィールドでカスタムディレクティブを作成するにはどうすればよいですか？

Question

私はAngular-2を勉強して実験しています。私は、私はと呼ばれるカスタムディレクティブを持って、説明することができます...入力フィールドを持つ角度-2命令を構築するために

をしようとcustom.directive.ts ......

インポート{}指令ました'@ angle/core'から;

@Directive（{

selector: '[inputDir]', 

}）

エクスポートクラスInputDirective {}

は、今私はここに私は私のapp.componentで使用したい入力フィールドを追加します。 ts。

どうすればいいですか？

Answer 1

あなたはこの

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core'; 

@Directive({ 
    selector: '[myHighlight]' 
}) 
export class HighlightDirective { 
    private _defaultColor = 'red'; 

    constructor(private el: ElementRef, private renderer: Renderer) { } 

    @Input('myHighlight') highlightColor: string; 

    @HostListener('mouseenter') onMouseEnter() { 
    this.highlight(this.highlightColor || this._defaultColor); 
    } 
    @HostListener('mouseleave') onMouseLeave() { 
    this.highlight(null); 
    } 

    private highlight(color: string) { 
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color); 
    } 
} 

のように宣言することができますし、このような任意の要素に属性としてこれを使用することができます。

<p [myHighlight]="color">Highlight me!</p> 

詳細説明

https://angular.io/docs/ts/latest/guide/attribute-directives.html

ために、このリンクを参照して行ってください