角度-2 可观察不起作用

Question

以下代码应记录来自 keyup 事件的数据，该事件取自输入字段，但没有任何反应，控制台保持空白（也没有错误）。

/// <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这是你永远不应该做的。

现在，这是您可以解决它的方法：

1. 设置对输入字段的模板引用。

2. 在钩子ngAfterContentInit初始化Observable.fromEvent：

@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 的可观察性？

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