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）。

來源

2017-02-25 deafdigit

你能告訴我們你的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)); 

    } 
}

來源

2017-02-25 11:31:20 AngularChef

經過一段時間的擺弄，現在可以工作了！我想這個錯誤可能是我導入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錯誤：「無效的事件目標」

回答

相關問題