Angular模态框Translate管道失效：引入jQuery后仅键盘操作显示文本

这问题我碰过好多次了，核心症结就是jQuery和Angular的变更检测机制不兼容——jQuery直接操作DOM的方式绕开了Angular的变更检测流程，导致翻译管道的更新没被Angular捕获到，只有当键盘操作这类能主动触发变更检测的事件发生时，翻译后的文本才会显示出来。下面给你几个可行的解决方案：

方案一：手动触发Angular变更检测 #

在模态框打开后，主动通知Angular进行一次变更检测，让它更新视图：

1. 先在组件中注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

2. 找到你打开模态框的代码（不管是用jQuery还是其他方式），在打开动作完成后调用detectChanges()：

// 假设你是用jQuery打开模态框的代码
$(this.msgModal.nativeElement).modal('show');
// 手动触发变更检测，强制Angular更新视图
this.cdr.detectChanges();

方案二：替换jQuery模态框为Angular原生组件（强烈推荐） #

既然用的是Angular，尽量避免直接用jQuery操作DOM，改用Angular生态内的模态框组件（比如Angular Material的MatDialog，或者Bootstrap Angular的NgbModal），这样完全在Angular的变更检测体系内运行，从根源上避免这类问题。

举个Angular Material Dialog的简单示例：

1. 创建一个删除确认对话框组件：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  template: `
    <p class="text-center">{{'Deseja deletar o encaminhamento?' | translate}}</p>
    <div style="text-align: center">
      <button class="btn btn-secondary" (click)="dialogRef.close(false)">{{'Não' | translate}}</button>
      <button class="btn btn-danger" (click)="dialogRef.close(true)">{{'Sim...'}}</button>
    </div>
  `
})
export class DeleteConfirmationDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<DeleteConfirmationDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}
}

2. 在你的主组件中调用这个对话框：

import { MatDialog } from '@angular/material/dialog';
import { DeleteConfirmationDialogComponent } from './delete-confirmation-dialog.component';

constructor(private dialog: MatDialog) {}

openDeleteModal() {
  const dialogRef = this.dialog.open(DeleteConfirmationDialogComponent);

  dialogRef.afterClosed().subscribe(result => {
    if (result) {
      this.deleteFWResearch(this.globalId);
    }
  });
}

方案三：用NgZone包裹jQuery操作 #

如果实在要保留jQuery的模态框，可以把打开模态框的代码放到NgZone的run方法里，让Angular感知到这次DOM操作：

1. 注入NgZone：

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

2. 把jQuery的模态框打开逻辑包裹起来：

this.zone.run(() => {
  $(this.msgModal.nativeElement).modal('show');
});

补充说明 #

Angular的视图更新依赖于它的变更检测机制，只有当Angular感知到组件数据发生变化时，才会重新渲染视图。而jQuery直接操作DOM的行为，Angular是完全不知情的，所以翻译管道的结果不会被更新到视图上。键盘操作之所以能触发显示，是因为这类用户交互事件会自动触发Angular的变更检测，让它重新检查并更新视图。

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