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

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

1 个答案: