angular i18n_如何在Angular中使用国际化（i18n）

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 ngx-translate, or, you can use the built-in i18n functionality.

例如，您可以使用第三方库(例如ngx-translate )，也可以使用内置的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: http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers.

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

项目模板 (Project Templates)

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

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

<section>
  <article>
    <h1>Under Construction!</h1>
    <p>This page is under construction.</p>
  </article>
</section>

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样式：