易于学习 .NET 6.0 和 Angular - 入门多语言 - 第 4 部分

syed shanu

5.00/5 (1投票)

2022 年 6 月 26 日

CPOL

7分钟阅读

9074

113

使用 .NET 6.0 和独立 Angular 模板入门，通过 Angular NGX translate 创建多语言网站

下载源代码 - 6 MB

引言

一直以来，我都在计划发布 .NET 6.0 和 Angular 系列文章。在这个系列中，我计划发布以下文章：

易学易用 .NET 6.0 和 Angular - Angular 模板入门 – 第 1 部分
易学易用 .NET 6.0 和 Angular - Angular 独立模板入门 – 第 2 部分
易学易用 .NET 6.0 和 Angular - Admin LTE 设计入门 – 第 3 部分
易学易用 .NET 6.0 和 Angular - 多语言入门 – 第 4 部分
易学易用 .NET 6.0 和 Angular - 发布到 IIS 入门 – 第 5 部分
易学易用 .NET 6.0 和 Angular - WEB API 入门 – 第 6 部分
易学易用 .NET 6.0 和 Angular - WEB API CRUD SQL SERVER 入门 – 第 7 部分

在本文中，我们将详细介绍如何使用 .NET 6.0 和独立 Angular 模板入门，通过 Angular NGX translate 创建多语言网站。

在本文中，我们将使用我们之前文章 .NET 6.0 和独立 Angular 模板的源代码来创建我们的 Admin 多语言网站。请阅读我之前的文章，其中详细介绍了如何入门 .NET 6.0 和独立 Angular 以使用 Admin LTE 创建我们的管理员风格网站。

国际化和本地化

国际化（i18n -> 是 Internationalization 的缩写）是指将任何产品、服务、品牌等进行国际化，即将任何业务扩展到许多国家建立的过程。本地化（L10n -> 是 Localization 的缩写）是指通过当地语言使国际化产品、服务、品牌等适应当地市场的过程。

我们可以看到，任何全球服务、品牌或产品的成功都取决于其国际化和本地化。

对于任何企业，公司所有者都梦想着将自己的业务、品牌、产品、服务等扩展到许多国家。为了实现这一目标，公司需要思考设计、开发和营销品牌、服务、产品等。为了实现这一点，需要强大的国际化来打造优秀的品牌并在全球市场中稳定发展。

第一步是进行品牌、产品、服务等的国际化，那么下一步是什么？是的，下一步是关于如何将品牌、产品、服务等营销到每个国家和当地市场。在这里，本地化将发挥至关重要的作用，因为对于任何当地人来说，通过当地语言接触任何品牌、服务或产品都是很好的。想象一个英语不太普及的国家，我们用英语向该国推广我们的品牌——这意味着触达范围非常有限，当地人也不会对产品感兴趣。为此，我们需要构建强大的当地语言文档和网站，以触达该国的当地市场。

我们可以看到所有标准和全球服务、产品、品牌网站都非常出色且是标准的多语言网站。多语言对使用该国家的当地客户和用户也很有用，并且更加用户友好，使他们更容易理解。

在本文中，我们将介绍如何在 .NET 6 和 Angular 中添加本地化以及创建多语言网站的步骤。在这里，我们将使用 Angular ngx-translate 来翻译语言。

背景

必备组件

Visual Studio 2022
Node.js – 如果您没有 Node.js，请安装 Node.js（下载链接）。
Angular CLI（下载链接）。

Using the Code

注意：我们将使用我们之前的文章源文件来创建我们的多语言管理员网站 .NET 6.0 和 Angular 独立模板项目。

步骤 1：安装 ngx-translate

第一步，我们在 .NET 6 和 Angular 项目中安装 ngx-translate。

在这里，我们需要在项目中安装两个包：@ngx-translate/core 和 @ngx-translate/http-loader，其中 translate/core 包将用于将我们的网站内容转换为所选语言。@ngx-translate/http-loader 包的安装将有助于加载我们的本地语言文件以进行翻译。

npm i @ngx-translate/core –save

npm i @ngx-translate/http-loader --save

步骤 2：创建我们的国际语言文件夹

我们需要在 assets 文件夹下创建一个名为 i18n 的新文件夹。为了在此处创建我们的本地语言翻译文件，我们需要在 i18n 文件夹中添加 json 文件。

请注意，对于 json 文件，我们使用国家代码作为文件名，例如，如果我们创建一个英语语言的 json 文件，则文件名为 en.json，如果我们创建韩语语言的 json 文件，则文件名为 kr.json，如果我们添加印度语言文件，则文件名为 in.json。

步骤 3：语言 json 文件

现在我们有三种不同的方法来创建我们的本地语言 json 文件。json 文件将采用键值对格式。

第一种方法

第一种方法非常简单，在键中，我们给出标签的名称，在值中，我们给出翻译文本。这不是一个好方法，因为如果我们添加更多页面并且翻译内容更多，那么维护 json 文件会非常困难。

这里，我添加了三种不同语言（泰米尔语、韩语和英语）的示例。

in.json

{
  "Welcome": "வணக்கம்! ஷானு"
}

 kr.json

{
  "Welcome": "안녕하세요! 샤누"
}

en.json

{
  "Welcome": "Welcome! Shanu"
}

第二种方法

第二种方法也非常简单，在键中，我们给出标签的名称以及一些主要唯一 ID，使用点作为分隔符，在值中，我们给出翻译文本。此方法比第一种方法更好，因为我们可以给出 pagename 和 labelname。

这里，我添加了三种不同语言（泰米尔语、韩语和英语）的示例。

in.json

{
  "navbar.Welcome": "வணக்கம்! ஷானு"
}

kr.json

{
  "navbar.Welcome": "안녕하세요! 샤누"
}

en.json

{
  "navbar.Welcome": "Welcome! Shanu"
}

第三种方法

第三种方法是最好的，因为在键中，我们给出标签的名称，在值中，我们给出翻译文本，并且我们可以按菜单或页面名称对语言翻译进行分组，以便于访问和维护语言文件以进行任何轻松更改。在我们的网站上，我们将遵循这种 json 文件方法。

这里，我添加了三种不同语言（泰米尔语、韩语和英语）的示例。

in.json

"navbar": {
    "Welcome": " வணக்கம்! ஷானு "
}
}

kr.json

"navbar": {
{
  "Welcome": "안녕하세요! 샤누"
}
}

en.json

"navbar": {
{
  "Welcome": "Welcome! Shanu"
}
}

步骤 4：app.module

接下来，我们需要导入最近安装的 ngx-translater，以便在我们的 Angular 应用程序中加载 json 文件以及使用翻译管道、服务和指令。此外，这里我们使用 HttpLoaderFactory 从文件夹动态加载我们的语言 json 文件。

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClienst: HttpClient) {
  /*return new TranslateHttpLoader(httpClient);*/
  return new TranslateHttpLoader(httpClienst , './assets/i18n/', '.json');
}

步骤 4：app.component

接下来在 app.component 中，我们导入 TranslateService，然后在类构造函数中使用 translateService，添加我们在网站中使用的所有语言，并且我们设置了我们网站使用的默认语言。请注意，在这里 addLangs 中，我们添加的语言与我们的 json 文件名相同。在这里，我们将默认语言设置为印度泰米尔语。

import { HttpClient } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'AngularStandAlone';
  constructor(public translateService: TranslateService) {
    translateService.addLangs(['in', 'kr', 'en']);
    translateService.setDefaultLang('in');
    this.translateService.use('in');
  }
}

步骤 5：在组件中绑定翻译

现在让我们将翻译绑定到我们的 Angular 组件。这里，我们使用 Angular 管道方法将翻译文本绑定到我们的组件。为此，打开我们的 navbar 组件并在欢迎消息中，替换以下代码

{{'navbar.Welcome' | translate}}

步骤 6：更改语言

要在同一 navbar 组件 html 页面中更改语言，我们调用 translateSite 方法，并传递每个国家代码，例如，印度泰米尔语为 in，韩语为 kr，英语为 en

<div class="dropdown-menu dropdown-menu-lg-right dropdown-menu-right" 
     style="max-width: 20px;width:20px">
        <a href="#" class="dropdown-item">
          <!-- Message Start -->
          <div class="media" (click)="translateSite('in')" >
            <img src="../../../../assets/Content/SiteImg/IND.png" 
             alt="Korean" class="img-size-32 mr-lg-4 img-circle" 
             style="height:24px;width:24px;">
            <div class="media-body">
              <h3 class="dropdown-item-title">
                India - Tamil
              </h3>
            </div>
          </div>
          <!-- Message End -->
        </a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">
          <!-- Message Start -->
          <div class="media" (click)="translateSite('kr')">
            <img src="../../../../assets/Content/SiteImg/KOR.png" alt="Korean" 
            class="img-size-32 mr-lg-4 img-circle" style="height:24px;width:24px;">
            <div class="media-body">
              <h3 class="dropdown-item-title">
                KOREA
              </h3>
            </div>
          </div>
          <!-- Message End -->
        </a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item ">
          <!-- Message Start -->
          <div class="media" (click)="translateSite('en')">
            <img src="../../../../assets/Content/SiteImg/ENG.png" 
            alt="English" class="img-size-32 mr-lg-4 img-circle" 
            style="height:24px;width:24px;">
            <div class="media-body">
              <h3 class="dropdown-item-title ">
                ENGLISH
              </h3>
            </div>

          </div>
          <!-- Message End -->
        </a>
      </div>

在 navbar 组件中，首先，我们导入 TranslateService，然后在类构造函数中。接下来，我们创建 translateSite 方法，该方法在我们的 html 页面中使用，用于发送国家代码，并使用 translateService 方法设置语言。

import { Component, Inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavBarComponent {
  constructor(public translateService: TranslateService) { 
  }

  translateSite(langauge: string) {
    this.translateService.use(langauge);
  }
}

步骤 8：构建和运行

现在是时候在我们的 Admin 网站中查看我们的多语言功能了。当我们运行应用程序时，我们可以看到翻译后的语言已显示在我们的 Admin 网站上。

在这里，对于我们的 Admin 网站，我已经翻译了泰米尔语和韩语，并将其添加到 json 文件中。我已将翻译绑定到每个组件的 HTML 页面。

关注点

希望本文能帮助您了解如何使用 Visual Studio 2022 入门 ASP.NET Core 和 Angular 独立项目，以设计多语言 Web 应用程序。请注意，这里我仅使用了 Google 翻译来翻译泰米尔语和韩语，因为这仅用于演示目的，当您制作网站时，请与熟悉当地语言的优秀翻译人员仔细核对翻译后的文本。

历史

2022 年 6 月 27 日：初始版本