Angular subscribe中的回调函数不起作用

在我的angular2应用程序中，我有一个回拨功能可以订阅。它应该只打印我的

DOM

中发生的每个

keyup

事件。我确信，我已经正确安装了

rxjs

模块

代码如下：

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx';


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

})

export class AppComponent {

    constructor(){

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

从'angular2/core'导入{Component}；
从'rxjs/Rx'导入{Observable}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
构造函数（）{
var keyups=可观察的。fromEvent（$（“#搜索”），“keyup”）；
subscribe（数据=>console.log（数据））；
}
}

问题是当我按下按钮时，控制台中没有显示任何内容。 那怎么了

$("#search")

找不到元素，因为它在构造函数中执行，并且该元素仅在调用

ngAfterViewInit（）

时存在

这应该起作用：

export class AppComponent {

    ngAfterViewInit(){

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

---

您可以像这样在模板中订阅

keyup

事件

<input id="search" type="text" class="form-control" (keyup)="onKey($event)">

---

解决此问题的更好方法是使用@ViewChild而不是JQuery声明

import { AfterViewInit, Component, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Rx'
@Component({
selector: 'my-app',
template:`
    <input #search type="text" class="form-control"  >
`
})
export class AppComponent {

@ViewChild('search') input: ElementRef

ngAfterContentInit() {
    var keyups = Observable.fromEvent(this.input.nativeElement, "keyup");
    keyups.subscribe(data => console.log(data));
}

从'@angular/core'导入{AfterViewInit，Component，ViewChild，ElementRef}；
从'rxjs/Rx'导入{Observable}
@组成部分({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
@ViewChild（“搜索”）输入：ElementRef
ngAfterContentInit（）{
var keyups=可观察的.fromEvent（this.input.nativeElement，“keyup”）；
subscribe（数据=>console.log（数据））；
}

为什么要在Angular2应用程序中使用jQuery？将一些变异的jQuery对象作为第一个对象传递给

fromEvent

将不起作用；我很惊讶它甚至可以编译。请注意，很少从rxjs/Rx导入，除非你想在应用程序中使用所有运算符。如果他想将keyup视为流，那就让他这么做吧很多很酷的东西，比如去Bouncing，他应该可以。我相信你的代码会工作，但是他的代码有什么问题吗？有人安排了

fromEvent

在我不看的时候获取jQuery对象吗？我不知道jQuery。但是你在代码片段中使用了它，你说“这应该工作”，至少假设他的

$

是jQuery，而不是

getElementById

的别名。我只是从他的问题中复制了它，并为我纠正了一个明显的错误，即代码是在

构造函数中执行的，而不是在
ngAfterViewInit
中执行的。Kamyar接受了这个答案似乎表明这对他有效；-)
import { AfterViewInit, Component, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Rx'
@Component({
selector: 'my-app',
template:`
    <input #search type="text" class="form-control"  >
`
})
export class AppComponent {

@ViewChild('search') input: ElementRef

ngAfterContentInit() {
    var keyups = Observable.fromEvent(this.input.nativeElement, "keyup");
    keyups.subscribe(data => console.log(data));
}