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

问题描述：

在我的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)); 
    } 
}

问题是当我按下按钮没有出现在我的控制台。那又怎么了？

为什么在Angular2应用程序中使用jQuery？将一些突变jQuery对象作为第一个对象传递给'fromEvent'将不起作用;我很惊讶它甚至编译。 – 2016-08-05 18:36:16

要小心，除非你想在你的应用程序中使用所有的操作符，否则应该很少从rxjs/Rx导入， – LookForAngular

答

$("#search")

，因为它是在构造函数中执行和元素，只有当ngAfterViewInit()被称为存在未发现的元素。

这应该工作：

export class AppComponent { 

    ngAfterViewInit(){ 

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

有人安排'fromEvent'在我不查找时使用jQuery对象吗？ – 2016-08-05 18:38:12

不知道jQuery。 –

但是你在代码片段中使用过它，你应该说“这应该起作用”，至少假设他的'$'是jQuery，而不是'getElementById'的某个别名。 – 2016-08-05 18:41:05

答

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

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

和打印这样的值：

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

好吧，如果他想把keyups当成一个流，让他做很多很酷的东西，比如debounce，他应该可以。我确定你的代码可以工作，但是他的代码有什么问题？ – 2016-08-05 18:37:17

答

更好解决这个问题的方法是使用@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)); 
}

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

相关推荐