Angular2 Observable mit RxJS keine Fehler, aber Ereignis nicht ausgelöst

Question

Ich baue einen einfachen Eingabe-Text mit einem Observable-Objekt, das mit dem keyup-Ereignis verknüpft ist.

Ich verwende Angular2 final ("@ angular/core": "~ 2.1.1" mit "rxjs": "5.0.2").

Hier ist meine 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)); 
    } 
} 

Wenn ich Taste drücken, nichts auf der Konsole angezeigt wird, so scheint es, dass das Ereignis ausgelöst wurde nicht oder der Beobachter woanders beobachtet. Was fehlt?

Vielen Dank im Voraus

Answer 1

Ich denke, Sie sollten versuchen, die beiden Linien zu bewegen, die in der ngAfterViewInitMethod in Ihrem Konstruktor sind:

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)); 
    } 
} 

Aber seien Sie vorsichtig, müssen Sie auch einen Verweis halten, um Ihre Abonnement, um sich zu entfernen, wenn Ihre Komponente gelöscht wird.

Und ich denke nicht, dass dies der "eckige Weg" ist, um das zu tun, was Sie wollen.

Ich denke, es ist besser, das "keyup" -Ereignis Ihrer Eingabe an eine Methode Ihrer Komponente zu binden.

@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"); 
    } 
}