避免在@ngx-translate 中重复翻译

Question

我正在创建一个 Angular 应用程序，我决定不使用内置的 i18n，而是使用 ngx-translate（主要是 setup/use 的易用性）。

如果需要，我希望应用程序默认为英语并通过 HTTP 延迟加载翻译。

例如在组件的 HTML 中输入：

<h1 translate>
    We build apps
</h1>

并提供例如使用 HttpTranslateLoader 进行翻译的 "de.json" 文件。

{
    "We build apps": "Wir bauen apps"
}

我面临的问题是，我可以成功切换到德语语言环境，但如果不提供另一个 "en.json" 具有重复翻译的语言环境，我就无法返回。

{
    "We build apps": "We build apps"
}

有什么方法可以让应用程序恢复为英语而无需复制所有英语翻译？

Answer 1

一个解决方案可能是创建 MissingTranslationHandler 并且只创建 return 密钥。

Answer 2

多亏了 PeS，我才得以解决这个问题，但仅仅创建处理程序是不够的。

我还必须添加一个只有 {} 内容的空 en.json 文件，在其他翻译旁边。

export class MyMissingTranslationHandler implements MissingTranslationHandler {
    handle(params: MissingTranslationHandlerParams) {
        return params.key;
    }
}

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/locale/', '.json');
}

TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient],
        },
        missingTranslationHandler: {
            provide: MissingTranslationHandler,
            useClass: MyMissingTranslationHandler,
        },
        useDefaultLang: false,
    }),

避免在@ngx-translate 中重复翻译

Avoid duplicate translations in @ngx-translate

ngx-translate

angular