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

最新推荐文章于 2024-06-02 18:18:21 发布

寒冰屋

最新推荐文章于 2024-06-02 18:18:21 发布

阅读量395

点赞数

分类专栏： ASP.NET CORE 架构及框架前端文章标签： angular.js javascript .net6

原文链接：https://www.codeproject.com/Articles/5335928/Easy-to-learn-NET-6-0-and-Angular-Getting-Starte-4

版权

ASP.NET CORE 同时被 3 个专栏收录

1136 篇文章 56 订阅

订阅专栏

架构及框架

635 篇文章 16 订阅

订阅专栏

前端

238 篇文章 4 订阅

订阅专栏

第 1 步：安装ngx-translate

下载源代码 - 6 MB

介绍

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

在本文中，我们将详细了解如何开始使用.NET 6.0和独立Angular模板，以使用Angular NGX翻译创建多语言网站。

在本文中，我们将使用上一篇文章.NET 6.0和独立Angular模板源来创建我们的管理多语言网站。请阅读我之前的文章，其中非常详细地逐步解释了如何开始使用.NET 6.0和独立Angular，以便与Admin LTE一起使用来创建我们的admin风格网站。

国际化和本地化

国际化（i18n ->是国际化的缩写）只不过是将任何产品、服务、品牌或蚀刻推向国际的过程，将任何业务扩展到许多国家。本地化（L10n ->是本地化的缩写）是通过使用当地语言将国际产品、服务、品牌等推向当地市场的过程。

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

对于任何企业来说，公司所有者的梦想是将他/她的业务、品牌、产品、服务等扩展到许多国家。为了实现这一目标，公司需要考虑设计、开发和营销品牌、服务、产品等。为了实现这一目标，需要强大的国际化才能打造任何好的品牌并在全球市场稳定。

第一步是做国际化的品牌、产品、服务等，那么下一步是什么。是的，下一个重要步骤是如何向每个国家和当地市场推销这个品牌、产品、服务等。在这里，本地化将发挥至关重要的作用，因为对于任何当地人来说，通过他们的当地语言接触任何品牌、服务或产品都是件好事。想象一下，在一个国家，英语说得不好，我们用英语向那个国家介绍我们的品牌——这意味着覆盖面很小，当地人不会有兴趣了解更多关于产品的信息。为此，我们需要的是使其建立强大的本地语言文档和网站，以进入该国的当地市场。

我们可以将所有标准和全球服务，产品，品牌网站视为非常好的标准多语言网站。对于使用国家的本地客户和用户来说，多语言也将是有用且更加用户友好的，这使他们更容易理解。

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

背景

先决条件

视觉工作室 2022
Node.js——如果您没有Node.js，请安装Node.js（下载链接）。
Angular CLI（下载链接）。

使用代码

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

第 1 步：安装ngx-translate

作为第一步，我们将ngx-translate安装到我们的.NET 6和Angular项目中。

在这里，我们可以看到，我们需要安装两个包@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 步：创建我们的国际语言文件夹

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

请注意，对于json文件，如果我们创建一个英语json文件，我们将文件名创建带有国家/地区代码作为示例，然后我们将文件制作为en.json，如果我们创建韩语json文件，则我们将json文件名设为kr.json，如果我们添加印度语言文件，然后我们将JSON文件制作为in.json。

第 3 步：语言json文件

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

第一种方式

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

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

in.json

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

 kr.json

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

en.json

{
  "Welcome": "Welcome! Shanu"
}

第二种方式

第二种方法非常简单，如在key中，我们给出标签的名称以及一些主要的唯一id，使用spearator作为点，在value中，我们给出翻译文本。这种方法比第一种方法更好，因为我们可以给出我们的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用于加载json文件以及在Angular应用程序中使用转换管道、服务和指令。此外，这里我们使用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');
}

第 5 步：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');
  }
}

第 6 步：在组件中绑定翻译

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

{{'navbar.Welcome' | translate}}

第 7 步：更改语言

为了在同一导航栏组件 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>

在导航栏组件中，首先，我们在类构造函数中导入TranslateService。接下来，我们创建在html页面中使用的translateSite方法来发送国家/地区代码并使用我们设置语言的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);
  }
}