web-dev-qa-db-fra.com

Angular 2 - inscription à l'erreur Observable.fromEvent: "Cible d'événement non valide"

Je reçois une erreur étrange en essayant de souscrire à un observable.

Voici une version édulcorée du code qui présente le problème:

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>

L'erreur que j'obtiens dans la console est:

Cible d'événement non valide

L'erreur apparaît UNIQUEMENT lorsque je m'abonne au flux. Si je le crée uniquement mais ne m'abonne pas, il n'y a pas d'erreur. Si je console.log le flux, il semble avoir un membre abonné.

J'ai essayé de googler l'erreur, mais je n'arrive pas à trouver où que ce soit expliqué.

Je pense que j'utilise Rxjs 4.0.5 (selon npm rxjs --version).

angularrxjsobservable
18
deafdigit

Le problème est le crochet de cycle de vie que vous utilisez. L'élément n'est pas encore créé dans DOM lorsque ngOnInit est appelé. À la place, vous devez utiliser ngAfterViewInit.

Pourriez-vous essayer le code suivant:

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

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

  }
}
43
AngularChef