使用 RxJS 的 Angular2 Observable 没有错误但事件未触发

Question

我正在构建一个简单的输入类型文本，其中包含一个链接到其上的 keyup 事件的 Observable 对象。

我正在使用 Angular2 final ("@angular/core": "~2.1.1" with "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));
    }
}

但请注意，您还需要保留对订阅的引用，以便在您的组件将被删除时取消订阅。

而且我不认为这是 "angular way" 执行您想要的操作。

我认为最好将输入的 "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");
    }
}

使用 RxJS 的 Angular2 Observable 没有错误但事件未触发

Angular2 Observable with RxJS no errors but event not fired

jquery

observable

rxjs

rxjs5

angular