入力が* ngIf = "someData"に存在する場合、ngAfterViewInit（）を介して入力するイベントハンドラを追加する方法は？

Question

テスト目的でjQuery on changeイベントハンドラに接続しています（ng2に利用可能な（変更）属性があります）。 my.component.tsファイルでは、私は直接my.component.htmlのルータ、アウトレットの下に配置され、選択のために成功し、次のイベントハンドラを実装することができます。

ngAfterViewInit() 
{ 
    $('#ddlTest').on('change', function() { alert('jquery change wireup'); }); 
} 

をしかし、本当の私は存在にバインドする必要があります選択

<div *ngIf="searchMetadata"> 
    <select id="ddlTest"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select> 
</div> 

メンバ変数は、サービスを呼び出して変数への応答を設定することで取得されます。私の問題は、* ngIfコンテナがngAfterViewInitイベントワイヤ配線ロジックがネストされた選択入力を見つけるのを妨げるように見えることです。私の推測では、ngIfter条件が実現される前にngAfterViewInitがhtmlのselectを探します。どのようにngIfを維持しながら、イベントのワイヤーアップをどのようにすることができますか？

Answer 1

別のフックを使用する必要があります。

ngAfterViewInitサービスコールを解決する前に実行されるので、jqueryはセレクタ#dd1Testを検出しません。

あなたの代わりにあなたのsearchMetadata実行この機能を更新：

updateSearchMetadata(value: any): void { 
    this.searchMetadata = value; 
    setTimeout(() => this.watchJQuerySelectChanges() , 100); 
} 

watchJQuerySelectChanges(): void { 
    if (this.searchMetadata) { 
     $('#ddlTest').on('change', function() { alert('jquery change wireup'); }); 
    } 
} 

はあなたが#dd1TestonChangeイベントの角の内側を使用したい場合にも、あなたがNgZone（docs）を使用する必要があります。

$('#ddlTest').on('change',() => { 
    this.ngZone.run(() => { 
     this.searchMetadata = undefined; // Example to show that angular will see this. 
    }); 
}); 

更新最善の方法

：ちょうどこれを追加jqueryのを使用して追加 onChangeイベントのコールバックに続いて

constructor(public ngZone: NgZone) 

：

はちょうどコンストラクタにそれを注入NgZoneを使用するには

<div *ngIf="searchMetadata"> 
    <select #ddlTest id="ddlTest"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select> 
</div> 

T帽子はViewChildの使用を許可します。

@ViewChild('ddlTest') 
set ddlTest(value: ElementRef) { 
    // keep the value if you want it for something. 
    $('#ddlTest').on('change',() => { 
     this.ngZone.run(() => { 
      // Do something 
      console.log('Hello there!'); 
     }); 
    }); 
} 

Answer 2

以下の手法が有効です。それは簡単で簡単です。それはハッキーですが、それは動作します。 addJQueryHook（）がヒットすると、上記のddlTestが既にレンダリングされます。あなたがより良い方法を知っているなら、lmkをお願いします！

<div *ngIf="SearchMetadata"> 
    <select id="ddlTest"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select> 
    <div *ngIf="addJQueryHook()"> 
    </div> 
</div>