Angular-2观察值不工作

Question

下面的代码应该记录来自keyup event的数据，这些数据来自一个输入字段，但是没有发生任何事情，并且console保持为空(也没有错误)。

/// <reference path="../typings/tsd.d.ts" />

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

Answer 1

你的代码有几个问题。

1)。Observable.fromEvent希望HTML元素作为第一个参数，但您传递的是jQuery实例。

2)。您正在尝试在构造函数中进行订阅，该构造函数不能保证组件内容将在那个时候加载。

3)。你使用硬编码的CSS选择器#search，这是你永远不应该做的。

现在，这是你可以修复它的方法：

在钩子中设置对input field.

• Initialize Observable.fromEvent的

1. 模板引用：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input #search type="text" class="form-control">
    </div>
  `
})
export class AppComponent {

  @ViewChild('search') input: ElementRef

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

演示： http://plnkr.co/edit/5TFDv0OoV8wWnDYneiFD?p=preview

Answer 2

既然核心angular2也可以实现同样的功能，为什么还要使用Rxjs中的observable

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

https://plnkr.co/edit/ZSqLNhSi0lI4HdKhulBf?p=preview

官方文档：https://angular.io/docs/ts/latest/guide/user-input.html

Answer 3

我正在做一个类似的项目，当我使用jquerySelector时，@ViewChild函数找不到元素。我把它改为声明式的方式：#search，它起作用了。

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