Question

我有一个要翻译的文字。文本作为json对象中的值保存在环境文件中。像这样：

myObject: {
   Key1: 'value1',
   Key2: 'value2',
   Key3: 'value3'
}

因此，我正在尝试使用$localize功能在此文本的*.component.ts文件中进行动态翻译。因此，我追求以下概念/想法：

ngOnInit(){
    ....
    for (let [key, value] of Object.entries(myObject)) {
        console.log(`key=${key} value=${$localize} :@@Text${key}:${value}`);
        return `${key}: ${$localize} :@@listColumn${key}:${value}`;
    }
}

这应该产生并给我以下反馈：

myObject: {
    key1: $localize ':@@TextKey1:value1',
    key2: $localize ':@@TextKey2:value2',
    key3: $localize ':@@TextKey3:value3'
}

另一方面，我确实有包含这些键的特定的trnalsation文件：

    <unit id="TextKey1">
       <segment>
           <source>value1</source>
           <target>valeur1</target>
       </segment>
   </unit>
   <unit id="TextKey2">
       <segment>
           <source>value2</source>
           <target>valeur2</target>
       </segment>
   </unit>
   ....

直到该阶段，一切看起来都很好，并且执行没有问题。但是，当尝试在视图中绑定翻译后的文本时，在开发控制台中出现以下错误：

key = key1值= function（）{ 引发新错误（“看起来您的应用程序或其依赖项中的一个正在使用i18n。\ n'+'Angular 9引入了需要加载的全局$localize()函数。\ n'+'请运行{{ 1}}从Angular CLI中开始。\ n'+'（对于非CLI项目，将ng add @angular/localize添加到您的import \'@angular/localize/init\';文件中。\ n'+'对于服务器端渲染应用程序，将导入添加到您的polyfills.ts文件。）'）; }：@@ TextKey1：value1

main.server.ts已经包含：polyfills.ts我还使用了其他组件中的import '@angular/localize/init';进行了动态翻译，并且可以直接进行工作。仅针对上述一种情况。

最后，我想提供的是为环境文件中保存的某些值/文本提供翻译，并将其传递给视图/ HTML。它们被保存为 javascript对象，因此，我将这些值从$localize导入到*.component.ts文件中，为其分配关键字environment，以便它们可以动态翻译和然后在HTML中输出正确的翻译。

其背后的原因是环境中的这些文本/值可以随时更改。

Answer 1

这行不通。基本上，$localize的工作是查看.ts文件的内容并搜索$localize调用。本地化程序不会找到任何动态的（运行时）内容，例如动态的本地化键。

最重要的是，您将始终必须编写本地化密钥。如果您提出问题，或者对动态翻译实际要实现的目的提出新的问题，我可能会为您提供帮助。

如何为从环境文件导入的文本动态分配$ localize？

1 个答案: