使用EventEmitter将按钮单击转换为RXJS observable

Question

以下是组件与EventEmitter的工作方式：

import { Component, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-my-component",
  template: ` <button (click)="clickEvent($event)">Foo</button> `
})
export class MyComponent {
  @Output()
  onClick: EventEmitter<string> = new EventEmitter<string>();

  clickEvent(): void {
    this.onClick.emit("something that comes from my.component.ts");
  }
}

@Component({
  selector: "app-root",
  template: `
    <h1>Title inside app component.</h1>
    <app-my-component (onClick)="doSomething($event)"></app-my-component>
  `
})
export class AppComponent {
  doSomething(foo) {
    console.log(foo);
  }
}

如何对RXJS可观测对象执行相同的操作？

我正在尝试以下方法：

import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  Output
} from "@angular/core";
import { Observable, fromEvent } from "rxjs";
import { tap } from "rxjs/operators";

@Component({
  selector: "app-my-component",
  template: ` <button #btn>Foo</button> `
})
export class MyComponent implements AfterViewInit {
  @Output()
  onClick: Observable<string>;

  @ViewChild("btn", { static: true }) buttonRef: ElementRef<HTMLButtonElement>;

  foo$: Observable<?>;

  ngAfterViewInit() {
    this.foo$ = fromEvent(this.buttonRef.nativeElement, "click").pipe(
      tap((e) => e.stopPropagation())
    );
  }

  // what should be returned here?
  onClick(): Observable<?> {
   return this.foo$
  }
}

@Component({
  selector: "app-root",
  template: `
    <h1>Title inside app component.</h1>
    <app-my-component (onClick)="doSomething(event$)"></app-my-component>
  `
})
export class AppComponent {
  doSomething(foo) {
    console.log(foo);
  }
}

或者你不应该在按钮上使用RXJS点击事件？

阅读了很多很老的博客文章，所以我没有找到一个完整的按钮点击事件的例子。任何指向正确方向的指针和工作示例都将真正有助于理解概念。

Answer 1

我在angular中从未见过这样的按钮点击方法，而且您已经在使用RxJS和EventEmitter:）

看看https://angular.io/api/core/EventEmitter

EventEmitter扩展了Subject，所以如果您想直接使用RxJS，请尝试使用它。您可以检查这个答案Angular-Rxjs Observable-Clicking事件实现，并给出一个很好的解释

此外，使用本机元素不受角度限制