webentwicklung-frage-antwort-db.com.de

Angular 2 - Abonnieren von Observable.fromEvent-Fehler: "Ungültiges Ereignisziel"

Beim Versuch, eine Observable zu abonnieren, wird ein seltsamer Fehler angezeigt.

Hier ist eine verwässerte Version des Codes, die das Problem darstellt:

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>

Der Fehler, den ich in der Konsole erhalte, ist:

Ungültiges Ereignisziel

Der Fehler wird NUR angezeigt, wenn ich den Stream abonniere. Wenn ich es nur erstelle, aber nicht abonniere, liegt kein Fehler vor. Wenn ich den Stream console.log, scheint er ein abonniertes Mitglied zu haben.

Ich habe versucht, den Fehler zu googeln, aber ich kann anscheinend nirgends etwas finden, was erklärt wird.

Ich glaube ich benutze Rxjs 4.0.5 (laut npm rxjs --version).

18
deafdigit

Das Problem ist der Lifecycle-Hook, den Sie verwenden. Das Element wird noch nicht in DOM erstellt, wenn ngOnInit aufgerufen wird. Verwenden Sie stattdessen ngAfterViewInit.

Könnten Sie den folgenden Code versuchen:

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