Angular中如何结合条件判断实现matTooltip的i18n翻译？

你遇到的核心问题是：[matTooltip]属于属性绑定语法，内部是TypeScript表达式，不能嵌套插值语法{{}}，所以直接写{{ I18N:foo.bar }}会触发语法错误。以下是几种可行的实现方案：

方案1：使用国际化服务的instant方法（以ngx-translate为例） #

先在组件中注入国际化服务，然后在表达式中调用instant方法获取翻译内容：

• 组件代码：

import { TranslateService } from '@ngx-translate/core';

constructor(public translate: TranslateService) {}

• 模板代码：

[matTooltip]="getValue() == 0 ? translate.instant('foo.bar') : 'bar'"

方案2：使用Translate管道 #

如果项目中配置了Translate管道，可直接在属性绑定的表达式中使用管道语法：

[matTooltip]="getValue() == 0 ? ('foo.bar' | translate) : 'bar'"

注：需确保模块已导入TranslateModule。

方案3：提前计算tooltip内容（适合复杂逻辑） #

如果判断逻辑更复杂，建议在组件中封装方法处理翻译与判断：

• 组件代码：

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {}

getTooltipText(): string {
  return this.getValue() === 0 ? this.translate.instant('foo.bar') : 'bar';
}

• 模板代码：

[matTooltip]="getTooltipText()"

若使用Angular原生i18n #

如果用的是Angular原生国际化方案，可通过$localize语法实现：

[matTooltip]="getValue() == 0 ? $localize`:@@foo.bar` : 'bar'"

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