Angular 2 - Observable.fromEventに登録中エラー：「無効なイベントターゲット」

Question

Observableを購読しようとすると奇妙なエラーが発生します。私はコンソールに入るエラーがある

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ストリーム。

私はエラーをグーグルで試してみましたが、どこにも説明されていないようです。

私はRxjs 4.0.5（npm rxjs --versionによる）を使用していると思います。

Answer 1

問題は、使用しているライフサイクルフックです。 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)); 

    } 
}