如果缺少密钥或正在加载翻译文件，则 ngx-translate 默认文本

Question

我正在设置一个新的 Angular 7 应用程序。我想为翻译设置默认文本。所以在翻译 {{ 'wait' |翻译}}，如果有任何后备，我想将文本“Waiting Now”设置为默认文本。表示如果正在加载数据或缺少键，则应显示传递的值（在本例中为 Waiting Now）。

我试图做类似{{ 'Intro' | translate:'localizedText' }}

没有成功

{{ 'Intro' | translate:'localizedText' }}

我希望结果应该是

{{ '简介' |翻译：'localizedText' }} => 介绍（如果正在加载或缺少键）

{{ '简介' |翻译：'localizedText' }} => 翻译文本

Answer 1

我按照说明在此处创建了缺少的翻译处理程序：https://github.com/ngx-translate/core#how-to-handle-missing-translations

但我的版本允许像这样将默认值传递给管道

<span>{{"MyTranslateKey" | translate: {Default: "Default Translation"} }}</span>

默认值可以是上面的特定字符串，也可以是变量。

这是我的处理程序：

import {MissingTranslationHandler, MissingTranslationHandlerParams} from '@ngx-translate/core';

export class MissingTranslationHelper implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
    if (params.interpolateParams) {
      return params.interpolateParams["Default"] || params.key;
    }
    return params.key;
  }
}

Answer 2

你需要使用自定义的MissingTranslationHandler 像这样：

在您的 app.module 或您正在加载的任何地方 TranslateModule.forRoot 执行此操作：

@Injectable()
export class MyMissingTranslationHandler implements MissingTranslationHandler {
    handle(params: MissingTranslationHandlerParams): string {
        return `**MISSING KEY: ${params.key}**`;
    }
}

在你的providers:[] 中添加这个：（在你导入MissingTranslationHandler 之后）

{
    provide: MissingTranslationHandler,
    useClass: MyMissingTranslationHandler
},

查看此链接了解更多详情：

https://github.com/ngx-translate/core#how-to-handle-missing-translations

要返回缺少的默认值，您可以尝试以下操作：

1- 创建一个对象/json 以包含默认值，该 json 应包含与原始 json 相同的结构。

const alternativeJson = {  
       value1: 'default1'
}

handle(params: MissingTranslationHandlerParams): string {
        return this.alternativeJson[params.key];
}