Angular中点击按钮修改其文本为Loading状态的其他实现方法有哪些？

你当前使用的直接操作DOM元素属性的方式可以实现功能，但不符合Angular数据驱动视图的核心设计思想，在服务端渲染、元素节点动态变化等场景下可能出现异常，以下是3种更符合Angular开发规范的实现方案，你可以根据自己的业务场景选择：

方案1：组件内部状态变量控制（最常用，适合单页面少量按钮场景） #

核心思路是在组件中定义布尔类型的loading状态变量，通过状态变化自动更新按钮的文本和禁用状态，全程不需要手动操作DOM。
组件ts代码：

// 定义loading状态，初始为false
isSubmitting: boolean = false;

submitForm() {
  // 点击后先把loading状态设为true
  this.isSubmitting = true;
  // 这里写你的表单提交逻辑，比如调用接口
  // 接口请求完成后把状态改回false即可恢复按钮：this.isSubmitting = false
}

模板html代码：

<div>
  <button 
    mat-raised-button 
    color="primary" 
    class="full-width" 
    [disabled]="subscribeForm.invalid || isSubmitting"
    (click)="submitForm()"
  >
    <!-- 三元表达式根据状态动态展示文本 -->
    {{ isSubmitting ? 'Loading...' : 'Subscribe' }}
  </button>
</div>

优势：逻辑简单易懂，和业务代码天然衔接，不需要额外封装，适合绝大多数小型项目场景。

方案2：封装自定义指令（适合多页面大量按钮复用场景） #

如果项目中很多按钮都需要loading效果，可以把逻辑封装成全局自定义指令，不用每个组件都重复写状态变量和判断逻辑。
第一步先创建全局指令：

// loading-button.directive.ts
import { Directive, Input, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appLoadingBtn]',
  exportAs: 'appLoadingBtn'
})
export class LoadingButtonDirective {
  // 支持自定义loading时的文本
  @Input() loadingText: string = 'Loading...';
  private originalText: string;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  // 监听按钮点击事件自动切换loading状态
  @HostListener('click')
  onClick() {
    this.originalText = this.el.nativeElement.textContent.trim();
    this.renderer.setProperty(this.el.nativeElement, 'textContent', this.loadingText);
    this.renderer.setProperty(this.el.nativeElement, 'disabled', true);
  }

  // 对外暴露重置方法，业务逻辑完成后调用恢复按钮状态
  reset() {
    this.renderer.setProperty(this.el.nativeElement, 'textContent', this.originalText);
    this.renderer.setProperty(this.el.nativeElement, 'disabled', false);
  }
}

记得把指令注册到你项目的共享模块中，之后就可以全局使用了，使用方式如下：
模板html代码：

<button 
  mat-raised-button 
  color="primary" 
  class="full-width" 
  [disabled]="subscribeForm.invalid"
  appLoadingBtn
  loadingText="Loading..."
  #subBtn="appLoadingBtn"
  (click)="submitForm(subBtn)"
>
  Subscribe
</button>

组件ts代码：

import { LoadingButtonDirective } from './loading-button.directive';

submitForm(btn: LoadingButtonDirective) {
  // 这里写你的表单提交逻辑
  // 请求完成后调用reset方法恢复按钮
  // btn.reset()
}

优势：一次封装全局可用，统一所有loading按钮的交互逻辑，减少重复代码，适合中大型项目使用。

方案3：结合RxJS异步流用async管道实现（适合按钮点击直接触发Observable请求的场景） #

如果你的提交逻辑返回的是RxJS的Observable对象，可以直接用async管道绑定状态，不需要手动维护loading布尔变量。
组件ts代码：

import { of } from 'rxjs';
import { delay, tap } from 'rxjs/operators';

// 模拟表单提交的异步请求
submitRequest$ = of({}).pipe(
  delay(2000), // 模拟2秒请求耗时
  tap(() => console.log('表单提交成功'))
)

模板html代码：

<div>
  <ng-container *ngIf="submitRequest$ | async; else loadingTpl">
    <button 
      mat-raised-button 
      color="primary" 
      class="full-width" 
      [disabled]="subscribeForm.invalid"
      (click)="submitRequest$ = submitRequest$.pipe()"
    >
      Subscribe
    </button>
  </ng-container>
  <ng-template #loadingTpl>
    <button 
      mat-raised-button 
      color="primary" 
      class="full-width" 
      disabled
    >
      Loading...
    </button>
  </ng-template>
</div>

优势：不需要手动管理loading状态的切换，RxJS自动处理异步流的状态变化，代码更简洁，适合响应式编程风格的项目。

内容的提问来源于stack exchange，提问作者Mr.T