Angular 2 - 订阅Observable.fromEvent错误：“无效的事件目标”

问题描述：

尝试订阅Observable时出现奇怪的错误。Angular 2 - 订阅Observable.fromEvent错误：“无效的事件目标”

下面是代码的淡化版本，提出了问题：

import {Component, Input, OnInit, ViewChild} from '@angular/core'; 
 
import Rx from 'rxjs/Rx'; 
 

 
@Component({ 
 
    selector: 'action-overview-description', 
 
    template: require('./actionOverviewDescription.html') 
 
}) 
 
export class ActionOverviewDescription { 
 
    @ViewChild('button') button; 
 

 
    constructor() {} 
 
    
 
    ngOnInit() { 
 

 
    let buttonStream$ = Rx.Observable.fromEvent(this.button, 'click') 
 
     .subscribe(res => console.log(res)); 
 

 
    } 
 
}

<button #input>Button</button>

我在控制台得到的错误是：

Invalid event target

错误ONLY当我订阅流时显示。如果我只创建它，但不订阅，那就没有错误。如果我console.log流似乎有一个订阅成员。

我试过用Google搜索错误，但我似乎无法找到它解释的任何地方。

我想我使用Rxjs 4.0.5（根据npm rxjs --version）。

你能告诉我们你的HTML代码呢？ – codeepic

'ngAfterViewInit' –

我试过ngAfterViewInit。这似乎没有什么区别。您想看到HTML的任何特定部分吗？模板简化为“按钮” – deafdigit

答

问题是您正在使用的生命周期钩子。当调用ngOnInit时，该元素尚未在DOM中创建。相反，您应该使用ngAfterViewInit。

你能试试下面的代码：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/fromEvent'; 

@Component({ 
    template: '<button #input>Button</button>' 
}) 
export class ActionOverviewDescription implements AfterViewInit { 
    @ViewChild('input') button: ElementRef; 

    ngAfterViewInit() { 
    let buttonStream$ = Observable.fromEvent(this.button.nativeElement, 'click') 
     .subscribe(res => console.log(res)); 

    } 
}

经过一段时间的摆弄，现在可以工作了！我想这个错误可能是我导入Rxjs的方式。也许缺少了“import”rxjs/add/observable/fromEvent'，这只是一个相当不明确的错误信息，如果是这样的话，我也有这样的印象ElementRef已被弃用或什么东西......无论如何 - 它现在可行！你到AngularFrance找到答案 – deafdigit

好的，很好:) ElementRef [在API中标记为稳定]（https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html ），我不认为它已被弃用，反正它只是一个类型注释，你可以用'any'替换它，代码的工作原理也是一样的。仅供参考，我认为你的代码中的主要错误是针对'this.button 'vs'this.button.nativeElement'。 – AngularChef

这对我不起作用。我最终将按钮定义为type：any，然后使用了Observable.fromEvent（this.button._elementRef.nativeElement，'click'） - 我正在使用在Ionic 3项目的背景下，它使用Angular 4下的cover/.. – JGFMK

Angular 2 - 订阅Observable.fromEvent错误：“无效的事件目标”

相关推荐