angular i18n

The consumption of modern web and mobile experiences is a worldwide thing. It isn’t just related to the locals around you and the surrounding culture. Therefore, just as you’d ensure that your design is aesthetically-pleasing and accessible, you should also ensure that your text is localized.

现代网络和移动体验的消费已成为世界性的事情。 它不仅与您周围的当地人和周围的文化有关。 因此，就像您确保设计在美学上令人愉悦且易于访问一样，您还应该确保文本已本地化。

This is the process of ensuring that your application supports multiple languages. This is traditionally done in an Angular application via multiple ways.

这是确保您的应用程序支持多种语言的过程。 传统上，这是在Angular应用程序中通过多种方式完成的。

You can, for example, use third party libraries such as , or, you can use the built-in i18n functionality.

例如，您可以使用第三方库(例如 )，也可以使用内置的i18n功能。

We’ll specifically be looking at using the built-in i18n inside of this article.

我们将专门研究在本文中使用内置的i18n。

新角度项目 (New Angular Project)

Create a new Angular project with the Angular CLI to establish a common base:

使用Angular CLI创建一个新的Angular项目以建立公共基础：

# Install the Angular CLI globally$ npm i @angular/cli -g# Create a new Angular project && change directory$ ng new AngularInt> N> SCSS$ cd AngularInt# Open this up in VS Code and Serve$ code . && ng serve

翻译 (Translations)

By default, Angular considers everything to be in en-US locale. We’ll have to add other locales and update our configuration to support this. You can see a list of various locales here: .

默认情况下，Angular会将所有内容都视为在en-US语言环境中。 我们必须添加其他区域设置并更新我们的配置以支持此设置。 您可以在此处查看各种语言环境的列表： : 。

项目模板 (Project Templates)

To create the basis for our translation project, head over to app.component.html and create the following template:

要为我们的翻译项目创建基础，请转到app.component.html并创建以下模板：

    
  
     
    
      
Under Construction!
    
      
This page is under construction.
  
     
    

We can also add some css to make it a little more magic, inside of app.component.scss:

我们还可以在app.component.scss内部添加一些CSS使其更具魔力：

section {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background: #8e2de2; /* fallback for old browsers */  background: -webkit-linear-gradient(to right, #4a00e0, #8e2de2); /* Chrome 10-25, Safari 5.1-6 */  background: linear-gradient(to right, #4a00e0, #8e2de2);}article {  text-align: center;  color: white;  border: 1px solid white;  padding: 40px;  box-shadow: 1px 1px 100px 10px rgba(0, 0, 0, 0.8);}

Finally, inside of styles.scss let’s default the html and body styles:

最后，在styles.scss内部，我们默认使用html和body样式：

html,body {  padding: 0px;  margin: 0px;}

This is now what we have:

现在，我们有了：

文字标记 (Text Marking)

Let’s start by marking text that we’d like to translate within our application. We’ll be translating the application into fr and de with Google Translate providing the translations.

首先，标记要在应用程序中翻译的文本。 我们将使用Google Translate提供的翻译将应用程序翻译为fr和de 。

Add the i18n directive to all of the text that you’d like to translate:

将i18n指令添加到您要翻译的所有文本中：

    
  
     
    
      
Under Construction!
    
      
This page is under construction.
  
     
    

Then we’ll make a script inside package.json that uses the Angular CLI to extract this into a messages.xlf file which contains all of our marked items:

然后，我们将在package.json中创建一个script ，该script使用Angular CLI将其提取到messages.xlf文件中，该文件包含所有标记的项目：

{  "scripts": {    "int:extract": "ng xi18n"  }}

After adding this, run npm run int:extract inside of your terminal. Then, open up messages.xlf and you’ll see something similar to this:

添加npm run int:extract之后，在终端内部运行npm run int:extract 。 然后，打开messages.xlf ，您将看到类似以下内容：

    
      
               
              
       Under Construction!        
                 
        
         app/app.component.html
                  
        
         3
                
             
            
              
       This page is under construction.        
                 
        
         app/app.component.html
                  
        
         4
                
             
            
     
    

For each item that needs translating (i.e. has the i18n directive), a trans-unit will be created.

对于需要翻译的每个项目(即具有i18n指令)，将创建一个trans-unit 。

      
     Under Construction!  
         
      
       app/app.component.html
          
      
       3
        
     
    

We can also use this structure to provide more information about the translation. This is useful if you’re getting each message translated by a third party and want to provide more information.

我们还可以使用此结构来提供有关翻译的更多信息。 如果您要让每条消息都由第三方翻译，并希望提供更多信息，这将很有用。

Inside of app.component.html, update the i18n items with a description:

在app.component.html ，使用描述更新i18n项：

    
  
     
Under Construction!
  
     
This page is under construction.
    

You can further add context to this by using the | seperator. This gives an item meaning and each item with the same meaning will have the same translation.

您可以使用|进一步添加上下文| 分隔符。 这给出了项目的含义，并且具有相同含义的每个项目将具有相同的翻译。

    
  
     
    
      
Under Construction!
    
      
This page is under construction.
  
     
    

We can also give each i18n item an ID by using @@ to enforce persistence when we generate our translations:

在生成翻译时，我们还可以使用@@为每个i18n项目赋予一个ID，以实现持久性：

    
  
     
Under Construction!
  
     
This page is under construction.
    

Let’s build our translations once again:

让我们再次构建翻译：

$ npm run int:extract

Our items will now be updated with the id, meaning and description:

我们的商品现在将使用id ， meaning和description进行更新：

  
        
     Under Construction!    
           
      
       app/app.component.html
            
      
       3
          
         
     
      Title for the under construction card
         
     
      Card Header
       
      
        
     This page is under construction.    
           
      
       app/app.component.html
            
      
       4
          
         
     
      A description for the under construction card.
         
     
      Card Descritpion
       
    

翻译 (Translations)

Now that we have a messages.xlf file that contains all of the items we want to translate, we can drag this into a src/locales folder and make the respective messages.de.xlf and messages.fr.xlf files.

现在我们有了一个messages.xlf文件，其中包含我们要翻译的所有项目 ，我们可以将其拖到src/locales文件夹中，并制作各自的messages.de.xlf和messages.fr.xlf文件。

At this stage, we can also update our int:extract script to handle this:

在此阶段，我们还可以更新int:extract脚本来处理此问题：

"int:extract": "ng xi18n --output-path src/locale"

法文 (French)

Starting with messages.fr.xlf, let’s look to translate the messages by using target and source.

从messages.fr.xlf开始，让我们看一下使用target和source来翻译消息。

Firstly, copy everything from messages.xlf into messages.fr.xlf. We can then add a target attribute for each item, which is equal to the translation in that language.

首先，将所有内容从messages.xlf复制到messages.fr.xlf 。 然后，我们可以为每个项目添加target属性，该属性等于该语言的译文。

  
        
     Under Construction!    
     
      En construction
         
           
      
       app/app.component.html
            
      
       3
          
         
     
      Title for the under construction card
         
     
      Card Header
       
      
        
     This page is under construction.    
     
      Cette page est en construction
         
           
      
       app/app.component.html
            
      
       4
          
         
     
      A description for the under construction card.
         
     
      Card Descritpion
       
    

Do the same for messages.de.xlf in Germany:

对德国的messages.de.xlf执行相同的操作：

  
        
     Under Construction!    
     
      Im Bau
         
           
      
       app/app.component.html
            
      
       3
          
         
     
      Title for the under construction card
         
     
      Card Header
       
      
        
     This page is under construction.    
     
      Diese Seite befindet sich im Aufbau
         
           
      
       app/app.component.html
            
      
       4
          
         
     
      A description for the under construction card.
         
     
      Card Descritpion
       
    

区域设置 (Locale builds)

Great! We’ve now got versions of our application that are translated based on locale.

大！ 现在，我们有了基于locale转换的应用程序版本。

We can use the Angular CLI to generate specific builds for each locale that we want to support.

我们可以使用Angular CLI为我们要支持的每个语言环境生成特定的构建。

Head over to angular.json and inside of the build settings add the configurations. I’ve omitted most of the boilerplate that already exists.

转到angular.json并在构建设置内部添加配置。 我已经省略了大多数已经存在的样板。

{  "projects": {    "AngularInt": {      "architect": {        "build": {          "configurations": {            "fr": {              "aot": true,              "outputPath": "dist/under-construction-fr/",              "i18nFile": "src/locale/messages.fr.xlf",              "i18nFormat": "xlf",              "i18nLocale": "fr",              "i18nMissingTranslation": "error"            },            "de": {              "aot": true,              "outputPath": "dist/under-construction-de/",              "i18nFile": "src/locale/messages.de.xlf",              "i18nFormat": "xlf",              "i18nLocale": "de",              "i18nMissingTranslation": "error"            }          }        }      }    }  }}

We can also update configurations inside of serve to allow us to serve the fr and de folders. Once again, I’ve kept this brief:

我们还可以更新serve内部的configurations ，以允许我们serve fr和de文件夹。 再一次，我保持简短：

{"serve": {  "configurations": {    "production": {      "browserTarget": "AngularInt:build:production"    },    "fr": {      "browserTarget": "AngularInt:build:fr"    },    "de": {      "browserTarget": "AngularInt:build:de"    }  }}

We can now make some more scripts inside of package.json which include the ability to build and serve our new locales:

现在，我们可以在package.json创建更多脚本，其中包括构建和服务新语言环境的功能：

{  "scripts": {    "ng": "ng",    "start": "ng serve",    "start:fr": "ng serve --configuration=fr",    "start:de": "ng serve --configuration=de",    "build": "ng build",    "build:fr": "ng build --configuration=fr",    "build:de": "ng build --configuration=de",    "test": "ng test",    "lint": "ng lint",    "e2e": "ng e2e",    "int:extract": "ng xi18n --output-path src/locale"  }}

We can start all of our projects by running the following in the terminal:

我们可以通过在终端中运行以下命令来启动所有项目：

$ npm run start$ npm run start:fr -- --port=4201$ npm run start:de -- --port=4202

This gives us our application three times, running in a different language each:

这使我们的应用程序运行了三次，每次以不同的语言运行：

Et Voilà! 🇫🇷🇩🇪

EtVoilà！ 🇫🇷🇩🇪

翻译自:

angular i18n