如何将自定义方法添加到角度组件？

Question

我正在使用 Ionic 框架，并为 IonButton 组件创建了一个新指令，它实际上禁用了按钮，然后在进程完成时将其重新启用（假设这是一个保存进度）。

这是我的按钮模板

<ion-button fill="clear" color="primary" expand="block" (click)="acceptRequest()" [submitButton]="true">
    ACCEPT
</ion-button>

[submitButton] 是我的指令中的输入，用于启用点击侦听器。

我可以在点击后使用@HostListener禁用按钮并修改其内容，

@HostListener('click') onButtonClick() {
const spinnerContent = `<ion-spinner name="dots"></ion-spinner>`
    if (this.isSubmitButton) {
        const spinnerContent = `<ion-spinner name="dots"></ion-spinner>`
        this.buttonElement.disabled = true;

        const btnChildren = this.el.nativeElement.children;
        this.oldElement = this.el.nativeElement.cloneNode(true);

        for (let child of btnChildren) {
          this.renderer.removeChild(this.el.nativeElement, child);
        }
        this.el.nativeElement.innerHTML = spinnerContent;
    }
}

问题是如何在保存过程完成后实现何时重新启用按钮。我正在使用 RxJS 将数据保存在 acceptRequest() 方法中。假设我正在保存到 API，然后重新启用按钮。

我知道的一些例子是IonRefresher，我们可以很容易地调用event.target.complete()来完成加载微调器并从页面中隐藏刷新器。

谢谢。

编辑： 我知道在按钮内部使用 [disabled] 比使用指令更容易，但是我需要更改元素的子节点，并且可以轻松使用。所以我想到了使用指令作为解决方案。

Answer 1

您可以 viewChild 按钮，并将其强制转换为指令，同时在指令上公开 API 以停止微调器（并重新启用您想要的一切）。

在指令中，您添加一个要公开的函数，然后在您的组件中，在模板上，添加#myBtn：

<ion-button #myBtn fill="clear" color="primary" expand="block" (click)="acceptRequest()" [submitButton]="true">
    ACCEPT
</ion-button>

在组件本身中，您可以将子组件强制转换为指令：

@ViewChild("myBtn", { read: SubmitDirective }) myBtn: SubmitDirective;

然后，在完成 API 调用后，您可以在刚刚创建的指令上调用函数 (this.myBtn.stopSpinner())

这是一个新的工作stackblitz