Angular2 Наблюдаемый с RxJS нет ошибок, но событие не активировано

Question

Я создаю простой текст типа ввода с объектом Observable, связанным с событием keyup на нем.

Я использую Angular2 final ("@ angular/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)); 
    } 
} 

Когда я нажимаю клавишу на консоли ничего не появляется, так что кажется, что это событие не было обстреляно или наблюдатель смотрит куда-то еще. Что не хватает?

Заранее спасибо

Answer 1

Я думаю, вы должны попытаться переместить две строки, которые находятся в вашем конструкторе в ngAfterViewInitMethod:

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

Но будьте осторожны, вы также должны иметь ссылку на ваш подписка на подписку, когда ваш компонент будет удален.

И я не думаю, что это «угловой способ» выполнить то, что вы хотите.

Я думаю, что лучше привязать событие «keyup» вашего ввода к методу вашего компонента.

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