Angular如何绑定指令参数以实现按钮加载文本动态切换？

嘿，你的思路方向是对的，但问题出在**ngOnInit只会在指令初始化时执行一次**，所以当saving变量后续切换true/false时，指令根本没收到通知，自然不会更新文本。下面给你两种简单有效的解决方案：

方案1：使用@Input的setter监听条件变化 #

这种方式最直观，直接给loadingTextWhen属性加一个setter，每次它的值变化时就触发文本更新，同时我们需要保存按钮的原始文本，这样才能在条件恢复false时还原回去。

修改后的指令代码：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[loadingText]' // 改成小驼峰/连字符，符合Angular规范
})
export class LoadingTextDirective implements OnInit {
  @Input('loadingTextValue') loadingText: string;
  private originalText: string; // 保存按钮初始文本

  // 用setter监听条件变化
  @Input('loadingTextWhen') 
  set condition(isLoading: boolean) {
    if (isLoading) {
      this.elem.nativeElement.innerText = this.loadingText;
    } else {
      this.elem.nativeElement.innerText = this.originalText;
    }
  }

  constructor(private elem: ElementRef) {}

  ngOnInit() {
    // 初始化时记录按钮的原始文本
    this.originalText = this.elem.nativeElement.innerText.trim();
  }
}

使用方式不变，注意selector改成小写的loadingText：

<button loadingText loadingTextValue="Hold on! Saving..." [loadingTextWhen]="saving" type="button" (click)="onSave()">Save</button>

// 组件里的逻辑
saving: boolean = false;

onSave() {
  this.saving = true;
  // 模拟异步保存操作
  setTimeout(() => {
    console.log('保存完成');
    this.saving = false;
  }, 2000);
}

方案2：使用ngOnChanges生命周期钩子 #

如果你需要监听多个输入属性的变化，ngOnChanges会更合适，它会在任何输入属性变化时触发，我们可以通过SimpleChanges对象拿到变化的细节。

修改后的指令代码：

import { Directive, ElementRef, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[loadingText]'
})
export class LoadingTextDirective implements OnInit, OnChanges {
  @Input('loadingTextValue') loadingText: string;
  @Input('loadingTextWhen') condition: boolean;
  private originalText: string;

  constructor(private elem: ElementRef) {}

  ngOnInit() {
    this.originalText = this.elem.nativeElement.innerText.trim();
  }

  ngOnChanges(changes: SimpleChanges) {
    // 检查condition属性是否变化了
    if (changes['condition']) {
      const isLoading = changes['condition'].currentValue;
      this.elem.nativeElement.innerText = isLoading ? this.loadingText : this.originalText;
    }
  }
}

使用方式和方案1完全一致，这种方式适合后续需要扩展多个输入属性的场景。

补充小提示 #

• 指令的selector建议用[loadingText]（小驼峰）或者[loading-text]（连字符），Angular官方更推荐这种规范，避免大小写问题。
• 可以给loadingTextValue设置默认值，比如如果用户没传的话，默认显示Loading...，增强鲁棒性。

内容的提问来源于stack exchange，提问作者Subhan