自定义角度按钮组件需要触发事件

Question

TL；DR：我在Angular中创建了一个按钮组件，无论哪个组件决定使用它，我都想在这个按钮触发行为中使用最佳实践反应行为。我不知道最佳实践是什么。

我已经创建了一个组件，它呈现了一个按钮，并且需要调用父组件中的一个操作。我目前拥有的是模板中的父组件：

<my-button (clicked)="doSomething()"></my-button>

父组件代码具有以下功能：

doSomething() {
// ..stuff happens
}

问题是myBtn组件当前正在侦听button元素上的点击事件，如下所示：

<button type="button" (click)="doClick()"></button>

这个功能用于触发事件本身(所以这里是完整的按钮组件代码)：

import { Component, EventEmitter, Input, Output } from "@angular/core";
@Component({
selector: "my-button",
templateUrl: "./my-button.component.html",
styleUrls: ["./my-button.component.css"]
})
export class MyButtonComponent {
constructor() {}

@Input() someCondition: boolean;
@Output() clicked = new EventEmitter();
doClick() {
if (!this.someCondition) {
this.clicked.emit(); // NOT REACTIVE???
}
}
}

我认识到doClick逻辑不是最佳实践，但我不确定最佳实践是什么

Answer 1

到目前为止，我想出的最好的代码是：

import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from "@angular/core";
import { combineLatest, fromEvent, Observable, Subject } from "rxjs";
import { debounceTime, distinctUntilChanged, filter, map, takeUntil, withLatestFrom } from 'rxjs/operators';
@Component({
selector: "my-button",
templateUrl: "./my-button.component.html",
styleUrls: ["./my-button.component.css"]
})
export class MyButtonComponent {
destroy$ = new Subject();
constructor() {}
@ViewChild("refreshBtn", { static: true }) clickerBtn: ElementRef;

@Input() refreshState$: Observable<boolean>;
@Input() label: string;
@Input() refreshLabel: string;
@Output() clicked = new EventEmitter();
ngAfterViewInit() {
fromEvent(this.clickerBtn.nativeElement, 'click')
.pipe(takeUntil(this.destroy$), debounceTime(300), withLatestFrom(this.refreshState$))
.subscribe(([_, refresh]) => !refresh && this.clicked.emit());
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}

这是有效的，到目前为止；最具反应性的"；我能想出的代码。