Angular 国际化是一种技术,它可以让你的应用程序能够在不同的语言和地区中运行。它可以帮助你的应用程序更好地服务于全球用户,并且可以帮助你更好地理解不同文化背景下的用户需求。
Angular 国际化是一个复杂的过程,它需要对代码、文本、图像和其他内容进行本地化处理,以便能够适应不同语言和地区的要求。Angular 提供了一些内置工具来帮助开发者实现国际化:
// 使用 Angular 的 i18n 工具来标记文本字符串: @Component({ selector: 'app-my-component', template: `My component
` }) export class MyComponent { }
// 使用 Angular 的 locale 过滤器来格式化时间、数字和货币: @Component({ selector: 'app-my-component', template: `{{ date | date:'longDate' }}` }) export class MyComponent { date = new Date(); }
此外,Angular 还提供了一个 ngx-translate 扩展库(也叫 i18n 库)来帮助开发者将文本字符串本地化。ngx-translate 是一个强大的工具,它可以将文本字符串分割成独立的部分并将其映射到特定语言/地区代码中。
此外,Angular 还提供了一些工具来帮助开发者测试国际化功能。例如,Angular CLI 命令行界面可以生成特定语言/地区代码的测试数据集。此外,Angular 还提供了一个单独的测试工具——i18n tester——来帮助开发者测试国际化功能是否正常工作。
总之,Angular 提供了很多内置工具和扩展库来帮助开发者实现国际化。使用这些工具和扩展库(如 ngx-translate 和 i18n tester )可以大大减少国际化过程中遇到的问题数量并极大地减少开发时间。
要浏览 Angular 国际化指南中使用的带法语翻译的范例应用,参见live example / 下载范例。
以下选项卡显示示例应用程序和相关的翻译文件。
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">
Hello i18n!
</h1>
<ng-container i18n>I don"t output any element</ng-container>
<br />
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo"/>
<br>
<button type="button" (click)="inc(1)">+</button> <button type="button" (click)="inc(-1)">-</button>
<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>
({{minutes}})
<br><br>
<button type="button" (click)="male()">♂</button> <button type="button" (click)="female()">♀</button> <button type="button" (click)="other()">⚧</button>
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
<br><br>
<span i18n>Updated: {minutes, plural,
=0 {just now}
=1 {one minute ago}
other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}}
</span>
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html"
})
export class AppComponent {
minutes = 0;
gender = "female";
fly = true;
logo = "https://angular.io/assets/images/logos/angular/angular.png";
inc(i: number) {
this.minutes = Math.min(5, Math.max(0, this.minutes + i));
}
male() { this.gender = "male"; }
female() { this.gender = "female"; }
other() { this.gender = "other"; }
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="introductionHeader" datatype="html">
<source>Hello i18n!</source>
<note priority="1" from="description">An introduction header for this sample</note>
<note priority="1" from="meaning">User welcome</note>
</trans-unit>
<trans-unit id="introductionHeader" datatype="html">
<source>Hello i18n!</source>
<target>Bonjour i18n !</target>
<note priority="1" from="description">An introduction header for this sample</note>
<note priority="1" from="meaning">User welcome</note>
</trans-unit>
<trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
<source>I don't output any element</source>
<target>Je n"affiche aucun élément</target>
</trans-unit>
<trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
<source>Angular logo</source>
<target>Logo d"Angular</target>
</trans-unit>
<trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
<source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
<target>{VAR_PLURAL, plural, =0 {à l"instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
</trans-unit>
<trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html">
<source>The author is <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></source>
<target>L"auteur est <x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/></target>
</trans-unit>
<trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html">
<source>{VAR_SELECT, select, male {male} female {female} other {other} }</source>
<target>{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</target>
</trans-unit>
<trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html">
<source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
<target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
</trans-unit>
<trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
<source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
<target>{VAR_PLURAL, plural, =0 {à l"instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</target>
</trans-unit>
<trans-unit id="myId" datatype="html">
<source>Hello</source>
<target state="new">Bonjour</target>
</trans-unit>
</body>
</file>
</xliff>
可复用动画本主题提供了一些关于如何创建可复用动画的例子。前提条件在继续本主题前,你需要熟悉下列知识:Angular动画简介转场...
静态模板为了演示Angular如何增强静态HTML,你可以创建一个纯静态HTML网页,然后仔细观察我们可以如何把这些HTML代码变成一个模...
安装moment如下:npm install momentmoment提供了一个函数,可用于将JavaScript的date对象包装到moment对象中。有很多方法来创建...
Node.js本身是以单线程的模式运行的,但它使用的是事件驱动来处理并发,这样有助于我们在多核 cpu 的系统上创建多个子进程,从而...
TypeScript do ... while循环do ... while循环类似于while循环,只是do ... while循环不会在第一次循环执行时评估条件。但是,将...
TypeScript 字符串concat()方法concat()方法添加两个或多个字符串并返回一个新的单个字符串。语法string.concat(...
命名空间是对相关代码进行逻辑分组的一种方法。这是内置于TypeScript中的,与JavaScript不同,其中变量声明进入全局范围,如果在...
很多网站都有提供一些很不错的JSON在线校验工具,我们也提供了一些JSON在线工具:Excel/csv数据转json格式工具这是一款可将Excel...
HTML DOM del 对象del 对象 del 对象代表了HTML文档中已被删除的文本。 del 元素定义文档中已被删除的文本。 del 元素经常与 ins...