时间戳

首页 > 解决方案 > 多个客户端和后备的角度本地化

angular - 多个客户端和后备的角度本地化

问题描述

我有一个将提供给多个客户的 Angular 10 应用程序。每个客户都可以拥有（这不是必须的）它自己的一组翻译文本。我怎样才能实现这种多重回退？完整的后备方案应如下所示：

[client.fr-CA]-> [client.fr] -> [client.en] -> (global-fr-CA) -> (global-fr) -> global-en

因此，如果在 client.fr-CA 中没有找到该文本，那么它将在 client.fr 中搜索，依此类推，直到找到包含应用程序中所有文本的 global-en。

我还尝试使用 Angular 它自己的 i18n 实现，我也尝试使用 ngx-translate。他们都只有一个后备。我什至找不到像这样实现不同语言环境的方法：(fr-CA) -> (fr) -> en。

我应该实现自己的翻译机制吗？:)

提前致谢！

标签： angularlocalizationinternationalizationlocaletranslation

解决方案

没有一个好的方法，但我会向您提出一些建议，您可以使用异步管道获得翻译的价值

想象你有这个

<p>{{ 'name' | translate }}</p>

你必须把它改成

<p>{{name$ | async }}</>

并根据您的条件在您的控制器中获取翻译值，假设顺序是 fr -> en -> de

name$: Observable<string> = this.translate.getTranslation(fr).pipe(
   switchMap(frTranslations=>
     iif(() => !!frTranslations['name'] // check here if exist
           , of(frTranslations['name'])
           , this.translate.getTranslation(en).pipe(
               switchMap(enTranslations=>
                iif(() => !!enTranslations['name'] // check here if exist
                 , of(enTranslations['name'])
                 , this.translate.getTranslation(de) ...
          )
         )
       )
     )      
   )
 );

它需要更多的重构，但我希望你明白这个想法，这个想法是检查翻译是否存在，如果是，你得到了价值，如果不是，你转到下一个电话

推荐阅读