Angular-2 Observable不起作用

发布时间：2020-12-17 17:26:41 所属栏目：安全来源：网络整理

导读：以下代码应记录来自keyup事件的数据,取自输入字段,但没有任何反应,控制台保持空白(也没有错误). /// reference path="../typings/tsd.d.ts" /import {Component} from 'angular2/core';import {Observable} from "rxjs/Rx";@Component({ selector: 'my-app',

以下代码应记录来自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));
    }
}

解决方法

你的代码有几个问题.

1). Observable.fromEvent期望HTML元素作为第一个参数,但是你传递的是jQuery实例.

2).您正在尝试在构造函数中进行订阅,该构造函数不保证此时将加载组件内容.

3).你使用硬编码的CSS选择器#search,你永远不应该这样做.

现在,您可以通过以下方式解决问题：

>将模板引用设置为输入字段.
>在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!