Angular2ディレクティブは、親コンポーネントのコールバックまたは変更をリッスンします

Question

私はangle2/4ディレクティブを作成しました。これは、DOM要素を入力するために添付して、クラスを追加して、空ではないことを示します。

@Directive({ 
    selector: '[inputNotEmptyAddClass]' 
}) 
export class InputNotEmptyDirective implements OnInit { 
... 
@HostListener('change') onChange() { 
     this.process(); 
    } 
... 
process() { 
[Add class to parent input element, when it has a value] 
} 

私はショーに日付ピッカーモジュール（https://github.com/kekeh/mydatepicker）を導入するまでは、すべての作業罰金でした。このモジュールは、新しいコンポーネントを作成します。このコンポーネントでは、1つの子供が入力であり、全体が日付を選択できます。 datepickers変数の一部に私は日付ピッカーのいずれかのコールバックを盗聴か（私はRXjSを使用しています）購読する私のディレクティブを書き換えたい

：私はここで達成しようとしています

。しかし、私はこれを正しく実装するためのアイデアがありません。

私は何を試しましたか？

私は私のディレクティブがにフックされた要素は、日付ピッカーであれば、私は、チェックして見ることができますControlValueAccessor

に

constructor(@Inject(NG_VALUE_ACCESSOR) private _valueAccessor: ControlValueAccessor) 

を使用していることを発見しました。

if (this._valueAccessor[0].constructor.name == 'MyDatePicker') { 

これで、onChange関数とすべての変数があることがわかりましたが、どのようにそれらを購読するかわかりません。

私のディレクティブでモジュールのコールバック関数を使用することもできますが、トリガーしていないようです。それらを引き金にする方法はありますか？

onDateChanged(event: IMyDateModel) { 
     // event properties are: event.date, event.jsdate, event.formatted and event.epoc 
    } 

ボトムライン。

親要素の変数とコールバックにディレクティブをフックする方法についての手がかりや解決策はありません。私はこれがかなり一般的な質問であることを理解していますが、誰かが私をここの正しい方向に向けることができます。

Answer 1

入力によってディスパッチされたイベントを聴くことができます。日付がdateChangedの場合、通常入力の場合はchangeです。あなたはディレクティブでそれを持っている場合は

指示がなければ、あなたはちょうどあなたがそれにHostListenerを追加することができ、

<input type="text" (change)="doSomething()" /> 

// (dateChanged)="doSomething()" in case of date 

を言うことができます。

@HostListener('dateChanged') dateChange() { 
    // do something 
}