Наблюдается с <button> события click в Angular2

Какой предпочтительный способ создать наблюдаемое из кнопки onclick событие с помощью Angular 2?

Я не уверен, считал ли он наилучшей практикой захват собственного элемента из DOM в коде компонента (как это сделать?), или если есть какой-то другой ярлык, о котором я не знаю.

Ответы

Ответ 1

Вы можете использовать Observable.fromEvent, как описано в Angular2 RxJS получение 'Observable_1.Observable.fromEvent не является функцией' ошибка

Или просто перейдите к наблюдаемому, например

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

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

или

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

Ответ 2

Не переусердствуйте.

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

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

Ответ 3

Пример @Gunter не очень сработал у меня, потому что мой компилятор не распознал publ.

Вот пример того, что сработало для меня: 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);
    }
}

Внутри modal.component.html:

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