Angular 8中ngx-translate在tooltip与Kendo Grid标题中失效问题求助

1. tool-tip-content属性绑定报错修复 #

报错的核心原因是tool-tip-content既不是a标签原生属性，也没有被对应指令注册为输入属性，Angular无法识别插值绑定的目标，需添加attr.前缀声明为自定义属性绑定，修改后代码如下：

<a class="text-dark tool-tip-definition tool-tip-position--left m-0 lh-0" 
  [attr.tool-tip-content]="'Users' | translate: Language" 
  aria-label="Email Contact" 
  href="mailto:{{item.partnername | splitEngPartner: '(':'email'}}"> 
  <i class="material-icons editIcon" type="button" aria-hidden="true">forward_to_inbox</i> 
</a>

如果使用的是第三方UI库的Tooltip组件，需额外确认当前组件所属模块已导入对应TooltipModule，若为自定义Tooltip指令，需确认指令已声明@Input() tool-tip-content输入属性。

2. Kendo Grid title翻译失效修复 #

Kendo Grid的title是组件输入属性，不要使用插值绑定，改用方括号属性绑定即可，修改后代码如下：

<kendo-grid-column field="productName" [title]="'ProductName' | translate" [width]="60"> </kendo-grid-column>

如果切换语言后title不自动更新，可通过订阅语言变更事件主动更新翻译值：

组件代码 #

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

export class YourComponent {
  productNameTitle: string;
  constructor(private translate: TranslateService) {
    // 初始化获取翻译
    this.translate.get('ProductName').subscribe(res => {
      this.productNameTitle = res;
    });
    // 监听语言切换更新翻译
    this.translate.onLangChange.subscribe(() => {
      this.productNameTitle = this.translate.instant('ProductName');
    });
  }
}

模板代码 #

<kendo-grid-column field="productName" [title]="productNameTitle" [width]="60"> </kendo-grid-column>

通用排查项 #

• 确认根模块已导入TranslateModule.forRoot()，当前组件所属模块已导入TranslateModule
• 确认所有语言的翻译json文件中都存在Users、ProductName对应的key，且翻译文件已正常加载
• 确认组件中Language变量已正确赋值，为ngx-translate已注册的语言编码

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