Question

在我的angular2应用程序中，我有一个回拨函数来订阅。它应该只打印我的keyup中发生的每个DOM事件。我确信，我已正确安装了rxjs模块。

以下是代码：

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

$("#search")

找不到元素，因为它在构造函数中执行，并且元素仅在调用ngAfterViewInit()时存在。

这应该有效：

export class AppComponent {

    ngAfterViewInit(){

       var keyups= Observable.fromEvent($("#search"),"keyup");
       keyups.subscribe(data => console.log(data));
    }
}

Answer 2

您可以像这样订阅模板中的keyup事件

<input id="search" type="text" class="form-control" (keyup)="onKey($event)">

并打印出这样的值：

     onKey(event:any) {
          console.log(event.target.value);
      }

Answer 3

解决此问题的更好方法是使用@ViewChild而不是JQuery声明。

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

订阅中的回调函数不起作用

3 个答案: