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