Angular 5指令优先级：如何让自定义I18nx指令先于MatButton执行？

这个问题我太熟悉了！之前在项目里用自定义国际化指令搭配Material组件时也踩过类似的坑，直接操作innerHtml很容易打乱Material组件的内部视图状态。要让你的I18nx指令在MatButton之前执行，或者说避免覆盖MatButton的变更，这里有几个靠谱的解决方案：

方案1：指定指令优先级（Angular 14+适用） #

从Angular 14开始，你可以在自定义指令的装饰器里通过priority属性设置执行顺序——数值越高，指令越先执行。MatButton的默认优先级是0，给你的I18nx指令设个更高的数值就能让它先跑：

@Directive({
  selector: '[i18nx]',
  priority: 10 // 高于MatButton的默认优先级，会先执行
})
export class I18nxDirective {
  // 你的翻译逻辑代码
}

方案2：改用textContent替代innerHtml（更推荐） #

直接修改innerHtml会完全替换元素内部内容，很容易清空MatButton自带的样式结构或绑定。换成Renderer2设置textContent，既能完成文本替换，又不会破坏组件内部的视图封装：

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

@Directive({
  selector: '[i18nx]'
})
export class I18nxDirective implements OnInit {
  @Input('i18nx') translationKey!: string;

  constructor(
    private el: ElementRef,
    private renderer: Renderer2,
    private translateService: YourTranslationService // 替换成你的翻译服务
  ) {}

  ngOnInit() {
    const translatedText = this.translateService.get(this.translationKey);
    // 用textContent而非innerHtml修改文本
    this.renderer.setProperty(this.el.nativeElement, 'textContent', translatedText);
  }
}

这种方式哪怕MatButton后执行，它的内部结构也不会被破坏，因为我们只改了文本内容，没动整个内部HTML。

方案3：调整生命周期钩子的执行时机 #

如果你的I18nx指令之前用的是ngAfterViewInit，可以换成ngOnInit或者ngOnChanges（输入属性变化时触发），这两个钩子会比MatButton的初始化钩子更早执行：

export class I18nxDirective implements OnInit {
  @Input('i18nx') key!: string;

  constructor(private el: ElementRef, private translateService: YourTranslationService) {}

  ngOnInit() {
    // 在这里执行翻译替换，早于MatButton的视图初始化
    const translatedText = this.translateService.get(this.key);
    this.el.nativeElement.textContent = translatedText;
  }
}

方案4：迁移到官方国际化方案（长期最优） #

如果项目规模不小，建议换成Angular官方的国际化模块或者成熟的第三方库（比如ngx-translate），用管道绑定文本的方式完全不会和Material组件冲突：

<button mat-button>{{ 'Forgot Password?' | translate }}</button>

这种方式符合Angular最佳实践，还能省掉自定义指令维护的麻烦。

如果必须保留自定义指令，优先选方案2——毕竟直接操作innerHtml本身就不是Angular推荐的做法，很容易引发变更检测或视图封装的问题。

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