Quan sát được từ <button> nhấp vào sự kiện trong Angular2

Question

Cách ưa thích để tạo một quan sát từ sự kiện onclick của nút bằng Angular 2 là gì?

Tôi không chắc liệu đó có phải là thực tiễn tốt nhất để lấy phần tử gốc từ DOM trong mã thành phần không (hoặc làm cách nào để thực hiện điều này?) Hoặc nếu có một số phím tắt khác mà tôi không biết.

Answer 1

Bạn có thể sử dụng Observable.fromEvent như được giải thích trong Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' error

Hoặc chỉ cần đợi một quan sát được như

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

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

hoặc

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

Answer 2

@ dụ Gunter đã làm không hoàn toàn công việc cho tôi , bởi vì trình biên dịch của tôi không nhận ra publ.

Dưới đây là một ví dụ về những gì làm việc cho tôi: 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); 
    } 
} 

Bên modal.component.html:

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

Answer 3

Đừng overthink nó.

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

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