Angular中如何为mat-table部分列跳过Translate管道

方案一：后端配置新增跳过翻译标识 #

在后端返回的列配置中添加布尔字段（比如skipTranslate），明确标记该列是否跳过国际化翻译。

修改后端返回示例： #

{
  "name": "status112_saldo",
  "label": "status saldo",
  "grid": true,
  "num": "d13",
  "align": "left",
  "ordType": "",
  "width": "350",
  "col_type": "sum",
  "excel": true,
  "skipTranslate": true // 新增字段，标记跳过翻译
}

修改前端模板： #

通过三元表达式判断是否应用Translate管道：

<ng-container *ngIf="tableColumn.ordType !== 'no'; else notSortable">
  <th mat-header-cell *matHeaderCellDef [mat-sort-header]="tableColumn.name"
      [arrowPosition]="tableColumn.align === 'right' ? 'before' : 'after'"
      [class.text-right]="tableColumn.align === 'right'"
      [class.text-left]="tableColumn.align === 'left'"
      [class.text-center]="tableColumn.align === 'center'"
      [style.width.px]="tableColumn.width">
        
    {{ tableColumn.skipTranslate ? tableColumn.label : ('grid.' + tableColumn.label | translate) }}
        
  </th>
</ng-container>

方案二：约定label的特殊格式规则 #

如果无法修改后端接口，可以通过约定label格式实现判断：

示例1：通过是否包含.判断 #

利用现有翻译键的层级结构（带.），判断label是否为纯文本：

<ng-container *ngIf="tableColumn.ordType !== 'no'; else notSortable">
  <th mat-header-cell *matHeaderCellDef [mat-sort-header]="tableColumn.name"
      [arrowPosition]="tableColumn.align === 'right' ? 'before' : 'after'"
      [class.text-right]="tableColumn.align === 'right'"
      [class.text-left]="tableColumn.align === 'left'"
      [class.text-center]="tableColumn.align === 'center'"
      [style.width.px]="tableColumn.width">
        
    {{ tableColumn.label.includes('.') ? ('grid.' + tableColumn.label | translate) : tableColumn.label }}
        
  </th>
</ng-container>

此时后端返回不需要翻译的列时，label直接写纯文本（如"label": "status saldo"）；需要翻译的列保持原有带.的键格式。

示例2：通过特定前缀标识 #

约定不需要翻译的label以raw:开头，前端截取前缀后的内容直接显示：

<ng-container *ngIf="tableColumn.ordType !== 'no'; else notSortable">
  <th mat-header-cell *matHeaderCellDef [mat-sort-header]="tableColumn.name"
      [arrowPosition]="tableColumn.align === 'right' ? 'before' : 'after'"
      [class.text-right]="tableColumn.align === 'right'"
      [class.text-left]="tableColumn.align === 'left'"
      [class.text-center]="tableColumn.align === 'center'"
      [style.width.px]="tableColumn.width">
        
    {{ tableColumn.label.startsWith('raw:') ? tableColumn.label.slice(4) : ('grid.' + tableColumn.label | translate) }}
        
  </th>
</ng-container>

后端返回示例：

{
  "name": "status112_saldo",
  "label": "raw:status saldo", // 带raw:前缀，直接显示后面的文本
  // 其他字段...
}

方案三：自定义处理管道 #

如果多个组件需要类似逻辑，建议封装自定义管道抽离判断逻辑：

1. 创建自定义管道 #

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'conditionalTranslate'
})
export class ConditionalTranslatePipe implements PipeTransform {
  constructor(private translateService: TranslateService) {}

  transform(key: string, prefix: string = 'grid.'): string {
    // 自定义判断规则：无`.`则直接返回原文本
    if (!key.includes('.')) {
      return key;
    }
    // 否则执行翻译
    return this.translateService.instant(prefix + key);
  }
}

2. 在模块中声明管道 #

在对应Angular模块的declarations数组中添加该管道：

import { ConditionalTranslatePipe } from './conditional-translate.pipe';

@NgModule({
  declarations: [
    // 其他组件/管道...
    ConditionalTranslatePipe
  ]
})
export class YourModule { }

3. 在模板中使用 #

<ng-container *ngIf="tableColumn.ordType !== 'no'; else notSortable">
  <th mat-header-cell *matHeaderCellDef [mat-sort-header]="tableColumn.name"
      [arrowPosition]="tableColumn.align === 'right' ? 'before' : 'after'"
      [class.text-right]="tableColumn.align === 'right'"
      [class.text-left]="tableColumn.align === 'left'"
      [class.text-center]="tableColumn.align === 'center'"
      [style.width.px]="tableColumn.width">
        
    {{ tableColumn.label | conditionalTranslate }}
        
  </th>
</ng-container>

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