Observable from <button> click event w Angular2

Question

Jaki jest preferowany sposób tworzenia obserwowalnego z zdarzenia onclick przycisku za pomocą Angular 2?

Nie jestem pewien, czy za najlepszą praktykę uważa się pobranie elementu natywnego z DOM w kodzie komponentu (jak to zrobić?) Lub czy istnieje inny skrót, o którym nie wiem.

Answer 1

Można użyć Observable.fromEvent jak wyjaśniono w Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' error

Albo po prostu doczekać zauważalny jak

private obs = new Subject(); 
public obs$ = this.obs.asObservable(); 

@HostListener('click', ['$event']) 
clickHandler(event){ 
    this.obs.next(event); 
} 

lub

<button (click)="obs.next($event)"> 

Answer 2

@ przykładem Guntera nie bardzo działa na mnie , ponieważ mój kompilator nie rozpoznał publ.

Oto przykład tego, co pracował dla mnie: modal.component.ts

import { Output, Component } from '@angular/core'; 
import {Subject} from "rxjs/Subject"; 

export class MyModal{ 

    private clickStream = new Subject<Event>(); 

    @Output() observ = this.clickStream.asObservable(); 

    buttonClick(event:Event){ 
     this.clickStream.next(event); 
    } 
} 

Wewnątrz modal.component.html:

<button type="button" class="btn btn-default" (click)="buttonClick($event)">click me</button> 

Answer 3

Nie overthink go.

@ViewChild('button') button; 
clicks$:Observable<any>; 

ngOnInit() { 
    this.clicks$ = Observable.fromEvent(this.button.nativeElement, 'click'); 
}