Angular2 RxJSでエラーは発生しませんが、イベントは発生しません

Question

単純な入力タイプのテキストを構築して、Observableオブジェクトをkeyupイベントにリンクしています。

私はAngular2 Final（ "@ Anger/Core"： "〜2.1.1"、 "rxjs"： "5.0.2"）を使用しています。ここで

は私app.component.tsです：私は、キーを押すと

import {Component} from '@angular/core'; 
import {Observable} from 'rxjs/Observable'; 

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

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

、何もコンソールに表示されていないので、イベントが発生していないか、観察者がどこかに見ているようです。 何が欠けていますか？

import {Component, AfterViewInit} from '@angular/core'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/fromEvent'; 

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

export class AppComponent implements AfterViewInit { 
    constructor(){ 

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

しかし、気をつけても、また、あなたへの参照を保持する必要があります：私はあなたがngAfterViewInitMethodであなたのコンストラクタである2行を移動しようとするべきだと思い、事前

Answer 1

で

感謝あなたのcomponenetが削除されるときにunsuscribeするサブスクリプション。

そして、私はこれがあなたが望むものを実行する "角度のある方法"だとは思わない。

入力の「キーアップ」イベントをコンポーネントのメソッドにバインドする方がよいと思います。

@Component({ 
    selector: 'my-app', 
    template: ` 
     <input (keyup)="onKeyUpOnInput($event)" type="text" class="form-control" placeholder="Search..." > 
    ` 
}) 

export class AppComponent implements AfterViewInit { 
    constructor(){ 

    } 
    onKeyUpOnInput(data){ 
     console.log("Key up"); 
    } 
}