サブスクライブのコールバック関数が機能しません

Question

私のangular2アプリケーションでは、私はサブスクライブするコールバック関数を持っています。それは単にすべてのkeyupイベントが私ので起こる印刷する必要があります。私は確かに、rxjsモジュールを正しくインストールしました。

import {Component} from 'angular2/core'; 
import {Observable} from 'rxjs/Rx'; 


@Component({ 
    selector: 'my-app', 
    template: ` 
      <input id="search" type="text" class="form-control"> 
     ` 

}) 

export class AppComponent { 

    constructor(){ 

     var keyups= Observable.fromEvent($("#search"),"keyup"); 
     keyups.subscribe(data => console.log(data)); 
    } 
} 

私は何も私のコンソールに表示されていないボタンを押したときに問題が次のとおりです。ここで

コードがあります。 何が間違っていますか？それはコンストラクタで実行され、ngAfterViewInit()が呼び出されたときに要素にのみ存在するため、

Answer 1

$("#search") 

は、要素を見つけることができません。

これは動作するはずです：

export class AppComponent { 

    ngAfterViewInit(){ 

     var keyups= Observable.fromEvent($("#search"),"keyup"); 
     keyups.subscribe(data => console.log(data)); 
    } 
} 

Answer 2

あなたはこの

<input id="search" type="text" class="form-control" (keyup)="onKey($event)"> 

のようなテンプレートでkeyupイベントにサブスクライブし、次のように値を印刷することができます：

 onKey(event:any) { 
      console.log(event.target.value); 
     } 

Answer 3

より良いですこの問題を解決する方法は、JQuery宣言の代わりに@ViewChildを使用しています。

import { AfterViewInit, Component, ViewChild, ElementRef } from '@angular/core'; 
import { Observable } from 'rxjs/Rx' 
@Component({ 
selector: 'my-app', 
template:` 
    <input #search type="text" class="form-control" > 
` 
}) 
export class AppComponent { 

@ViewChild('search') input: ElementRef 

ngAfterContentInit() { 
    var keyups = Observable.fromEvent(this.input.nativeElement, "keyup"); 
    keyups.subscribe(data => console.log(data)); 
}