Angular 角度-2可观测不'；行不通

下面的代码应该记录keyup事件中的数据，这些数据取自一个输入字段，但不会发生任何事情，控制台保持空白（也没有错误）

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

您的代码有几个问题

1）

Observable.fromEvent

期望HTML元素作为第一个参数，但是您正在传递jQuery实例

2） 。您正在尝试在构造函数中订阅，但该构造函数不能保证组件内容将在该时间加载

3） 。您使用硬编码的CSS选择器

#search

，这是您永远不应该使用的

现在，您可以通过以下方式进行修复：

将模板引用设置为输入字段

在

ngAfterContentInit

hook中初始化可观察的

fromEvent

：

@组件({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
@ViewChild（“搜索”）输入：ElementRef
ngAfterContentInit（）{
var keyups=可观察的.fromEvent（this.input.nativeElement，“keyup”）；
subscribe（数据=>console.log（数据））；
}
}

---

演示：

当使用核心角度2可以实现同样的效果时，为什么要使用Rxjs中的可观察的

//our root app component
import {Component, Pipe,ViewChild} from '@angular/core';
import {myservice} from 'app/service';

@Component({
  selector: 'my-app',
  template: `
          <h1>angular2</h1>
            <input #box (keyup)="onKey(box.value,$event)">
    <p>{{values}}</p>
  `,
})
export class AppComponent {       
  values = '';

  onKey(value: string,event) {
    this.values += value + ' | ';
    console.log(event);
  }
}

//我们的根应用程序组件
从“@angular/core”导入{Component，Pipe，ViewChild}；
从'app/service'导入{myservice}；
@组成部分({
选择器：“我的应用程序”，
模板：`
角2
{{values}}

`,
})
导出类AppComponent{
值=“”；
onKey（值：字符串、事件）{
this.values+=value+'|'；
console.log（事件）；
}
}

---

官方文档：

当我使用jquerySelector时，我正在处理一个类似的项目，@ViewChild函数没有找到元素。我将其更改为声明式方式：#搜索成功了

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（数据））；
}  

@ViewChild（'search'））输入：ElementRef；有红色错误提示。我应该导入顶部的内容吗？您检查演示了吗？您需要从@angular/core导入

ElementRef

。是的，现在可以了，谢谢。但这不是我想要的确切输出。我想记录整个输入值，不带字母分隔。

keyups.subscribe（data=>console.log（数据.目标.价值）

？它确实有效，谢谢。但我想记录整个输入值，不带字母分隔。你能告诉我这是什么意思吗？将jQuery与angular2一起使用就像是在2009年有一只脚，在2016年有一只脚。您好，欢迎来到StackOverflow。您能分享其他信息吗？为什么您的答案有效，以及与之不同的是什么这个问题。这将改善它！