Introduction to Internationalization in Angular-KNTN-nsbV7M.cn.vtt

WEBVTT
Kind: subtitles
Language: zh-CN

00:00:00.000 --> 00:00:01.850
马克·汤普森：嗯

00:00:01.850 --> 00:00:07.593
我希望有一些方法可以让我的应用程序以
我的用户的语言显示

00:00:07.490 --> 00:00:08.810
哦，等等，确实有

00:00:08.810 --> 00:00:10.380
你想知道怎么做吗？好吧

00:00:10.380 --> 00:00:11.450
你知道该怎么做

00:00:11.450 --> 00:00:13.338
坐在这儿听我说

00:00:13.338 --> 00:00:23.970
[音乐播放] 嘿，朋友们

00:00:23.970 --> 00:00:26.250
我是来自 Angular 团队的 Mark

00:00:26.250 --> 00:00:29.160
我很高兴能带着另一个精彩的新视频回来

00:00:29.160 --> 00:00:32.622
我们将一起学习国际化和 Angular

00:00:32.622 --> 00:00:35.190
并对应用程序进行国际化

00:00:35.190 --> 00:00:38.350
这会很棒

00:00:38.350 --> 00:00:41.754
让我们在编写任何代码之前复习一些术语

00:00:41.754 --> 00:00:43.870
以便我们有共同的背景知识

00:00:43.870 --> 00:00:47.329
如果你已经熟悉国际化

00:00:47.329 --> 00:00:50.130
则可以跳到下一章

00:00:50.130 --> 00:00:54.314
在谈论以不同语言提供你的应用程序时

00:00:54.314 --> 00:00:58.020
你可能会听到术语"国际化"和"本地化"

00:00:58.020 --> 00:01:01.620
尽管这些术语相关，但并不相同

00:01:01.620 --> 00:01:02.580
让我解释一下

00:01:02.580 --> 00:01:05.972
国际化，或通常缩写为 i18n

00:01:05.972 --> 00:01:14.926
是准备和设计你的应用程序以支持其在不同
语言和语言方言中使用的过程

00:01:14.790 --> 00:01:18.630
这可能包括通过分离随后将要翻译的内容

00:01:18.630 --> 00:01:22.470
使你的应用程序能够支持以不同语言渲染

00:01:22.470 --> 00:01:23.061
此外

00:01:23.061 --> 00:01:31.329
准备工作可能包括更新你的应用程序以支持
双向文本 —— 即从左到右或从右到左

00:01:31.210 --> 00:01:32.874
准备好应用程序后

00:01:32.874 --> 00:01:35.320
下一步就是本地化应用程序

00:01:35.320 --> 00:01:41.098
本地化是为不同语言环境构建项目版本的过程

00:01:40.960 --> 00:01:43.314
等等，什么是语言环境？

00:01:43.314 --> 00:01:48.728
语言环境标识人们使用某种语言或语言变体
的区域

00:01:48.610 --> 00:01:50.782
对于给定的语言环境

00:01:50.782 --> 00:01:54.670
时间、数字和货币的单位都有特定的格式

00:01:54.670 --> 00:02:01.420
还有名字的翻译，包括时区、语言和国家

00:02:01.420 --> 00:02:08.598
查看描述以获取更多资源和包含有关
区域设置信息的有用链接

00:02:08.470 --> 00:02:16.176
本地采用语言 ID 连字符区域设置扩展的
格式 —— 例如

00:02:16.176 --> 00:02:19.548
en-US 表示英语和美国

00:02:19.548 --> 00:02:23.241
fr-CA 表示法语和加拿大

00:02:23.080 --> 00:02:25.240
这里还有一些需要考虑的事情

00:02:25.240 --> 00:02:28.634
国际化过程从技术上说只需要做一次

00:02:28.634 --> 00:02:34.805
然后你就可以根据需要将你的应用程序本地化
到尽可能多的语言环境

00:02:34.805 --> 00:02:37.582
而无需更改你的应用程序代码

00:02:37.480 --> 00:02:40.211
如果你扩展应用程序

00:02:40.211 --> 00:02:44.380
则需要确保这些新页面已国际化

00:02:44.380 --> 00:02:44.944
现在

00:02:44.944 --> 00:02:50.583
团队可能会多次执行本地化过程以支持不同
的语言环境

00:02:50.470 --> 00:02:52.219
并且根据目标语言的不同

00:02:52.219 --> 00:02:58.083
可能会发现来自其中一个语言环境的字符串
大小可能会破坏 UI

00:02:57.980 --> 00:03:00.980
例如，这可能发生在德语等语言中

00:03:00.980 --> 00:03:04.690
所以一定要检查你的用户界面

00:03:04.690 --> 00:03:05.410
好吧，就说到这

00:03:05.410 --> 00:03:06.659
说完语言

00:03:06.659 --> 00:03:11.240
让我们回顾一下今天要一起做的事情

00:03:11.240 --> 00:03:16.791
我们将安装依赖项以添加对本地化和国际化
的支持

00:03:16.670 --> 00:03:19.310
我们将使我们的应用程序国际化

00:03:19.310 --> 00:03:23.240
然后我们将本地化我们的应用程序

00:03:23.240 --> 00:03:26.050
现在这是我们要本地化的应用程序

00:03:26.050 --> 00:03:30.490
它代表电子商务应用程序中的订单确认页面

00:03:30.490 --> 00:03:33.430
好吧，让我们转到代码

00:03:33.430 --> 00:03:36.130
首先，让我们安装这些依赖项

00:03:36.130 --> 00:03:39.967
我们将使用 Angular localize 包来做到这
一点

00:03:39.880 --> 00:03:42.213
在项目的命令行中

00:03:42.213 --> 00:03:46.330
键入 ng add @angular/localize

00:03:46.330 --> 00:03:49.930
当被问及是否要继续时，回答是

00:03:49.930 --> 00:03:53.894
该软件包为我们提供了本地化应用程序的工具

00:03:53.800 --> 00:03:55.915
在整理依赖项的同时

00:03:55.915 --> 00:03:58.810
我们还将更新 angular.json

00:03:58.810 --> 00:04:01.990
首先，我们将指定要支持的语言环境

00:04:01.990 --> 00:04:04.810
在这个例子中，我将使用西班牙语

00:04:04.810 --> 00:04:08.134
在项目下，我们的应用程序名称

00:04:08.134 --> 00:04:10.390
我将添加 i18n 属性

00:04:10.390 --> 00:04:13.823
接下来，我将指定源语言环境属性

00:04:13.823 --> 00:04:17.600
这是我们在源代码中使用的语言环境

00:04:17.600 --> 00:04:21.519
所以对于这个例子，它将是 en-US

00:04:21.519 --> 00:04:25.206
让我们添加另一个名为 locale 的属性

00:04:25.206 --> 00:04:31.526
并指定此应用程序将支持哪些区域设置以及
翻译文件将存储在何处

00:04:31.420 --> 00:04:34.390
那将是 src/local/messages.es.xlf

00:04:34.390 --> 00:04:42.970
我们尚未创建此文件，但很快就会创建

00:04:42.970 --> 00:04:46.593
在 architect, build, options 下

00:04:46.593 --> 00:04:49.650
让我们添加另一个本地化属性

00:04:49.650 --> 00:04:52.254
并为其赋予一个数组的值

00:04:52.254 --> 00:04:54.971
其中 es-PR 作为唯一元素

00:04:54.970 --> 00:05:00.989
这会告诉 Angular 在本地化应用程序时要
构建哪个语言环境

00:05:00.880 --> 00:05:02.101
另外请注意

00:05:02.101 --> 00:05:07.651
添加此属性还允许我们在 ng serve 中预览
特定区域设置

00:05:07.540 --> 00:05:11.795
我们无法使用 ng serve 同时预览多个
语言环境

00:05:11.795 --> 00:05:21.824
因此将多个语言环境添加到数组或将属性值
设置为 true 将导致在使用开发服务器运行
我们的应用程序时出错

00:05:21.520 --> 00:05:23.950
好了，我们的应用配置完成了

00:05:23.950 --> 00:05:25.630
做得好

00:05:25.630 --> 00:05:26.310
接下来

00:05:26.310 --> 00:05:29.710
让我们检查我们的应用程序并查找 OTI

00:05:29.710 --> 00:05:33.880
这就是国际化的机会

00:05:33.880 --> 00:05:35.921
在我们的应用程序中

00:05:35.921 --> 00:05:38.822
我们在哪里可以找到一些 OTI？

00:05:38.822 --> 00:05:45.483
此应用程序具有相当多的可以国际化的字符串
—— 你的订单正在发送中

00:05:45.483 --> 00:05:49.995
感谢你与我们一起购物并且你的订单已被处理

00:05:49.995 --> 00:05:53.218
表格标题的项目数量、日期和金额

00:05:53.218 --> 00:05:55.044
最后是总金额文本

00:05:54.830 --> 00:06:00.490
我们还可以将总金额和日期值的货币国际化

00:06:00.490 --> 00:06:05.020
还有别的事吗？现在，这个很容易错过

00:06:05.020 --> 00:06:06.574
如果你说的是图片

00:06:06.574 --> 00:06:09.407
那么我希望你现在拿住这个手柄

00:06:09.407 --> 00:06:10.961
因为我还有东西给你

00:06:10.960 --> 00:06:12.740
恩，击掌鼓励

00:06:12.740 --> 00:06:13.540
你是对的

00:06:13.540 --> 00:06:19.606
图像将包含需要翻译成我们语言环境语言的
替代文本

00:06:19.480 --> 00:06:23.181
现在我们知道哪些东西要国际化了

00:06:23.181 --> 00:06:25.450
让我们再来看看代码

00:06:25.450 --> 00:06:27.750
在 app.component.html 中

00:06:27.750 --> 00:06:30.970
让我们从更新应用程序的文本部分开始

00:06:30.970 --> 00:06:37.763
我们将通过添加 i18n 属性将这些标记为将
在所选语言环境中显示的内容

00:06:37.660 --> 00:06:39.274
在我们的例子中

00:06:39.274 --> 00:06:41.964
我们将使用属性的基本形式

00:06:41.964 --> 00:06:46.160
但开发人员也可以添加更多元数据详细信息

00:06:46.160 --> 00:06:48.850
如自定义 ID 和译者上下文

00:06:48.850 --> 00:06:49.443
接下来

00:06:49.443 --> 00:06:52.750
我们将使用管道来标记要翻译的日期和货币

00:06:52.750 --> 00:06:53.828
默认情况下

00:06:53.828 --> 00:06:58.728
日期管道和货币管道都支持特定于语言环境
的格式设置

00:06:58.630 --> 00:07:05.199
我们将利用 i18n 属性来标记要翻译的图像
的 Alt 文本属性

00:07:05.080 --> 00:07:08.470
alt 属性不是这里唯一的选项

00:07:08.470 --> 00:07:12.370
我们也可以标记翻译的其他属性

00:07:12.370 --> 00:07:13.795
在继续下一步之前

00:07:13.795 --> 00:07:20.922
让我们使用美元符号 localize 在我们的组件类
app.component.ts 中标记要翻译的页面标题

00:07:20.755 --> 00:07:21.885
就这样

00:07:21.885 --> 00:07:26.890
我们已经国际化了我们的应用程序

00:07:26.890 --> 00:07:28.180
我们继续！

00:07:28.180 --> 00:07:29.650
现在进入重点部分

00:07:29.650 --> 00:07:37.857
我们将使用 Angular CLI 的 extract i18n
命令来提取所有已标记为翻译的元素

00:07:37.750 --> 00:07:41.947
在命令提示符中，键入 ng extract --i18n

00:07:41.947 --> 00:07:47.077
然后使用输出路径选项指定翻译文件的存放
位置

00:07:46.960 --> 00:07:50.690
在此示例中，我将添加 source/locale

00:07:50.690 --> 00:07:54.310
它与 angular.json 中的位置相匹配

00:07:54.310 --> 00:07:56.837
在我们刚刚创建的 locale 文件夹中

00:07:56.837 --> 00:07:59.440
现在有了我们的消息文件，这很棒

00:07:59.440 --> 00:08:02.230
但是这些消息是用原始语言写的

00:08:02.230 --> 00:08:03.730
这是下一步该做什么

00:08:03.730 --> 00:08:07.629
我们将为每个支持的语言环境制作此文件的
副本

00:08:07.540 --> 00:08:13.568
我要制作一个名为 messages.es.xlf 的文
件的副本

00:08:13.440 --> 00:08:20.964
这是使用我们在 angular.json 中指定的语
言环境 ID

00:08:20.810 --> 00:08:24.335
此时，我们将本地文件传递给翻译器

00:08:24.335 --> 00:08:28.190
然后使用更新后的文件更新我们的项目

00:08:28.190 --> 00:08:32.490
但是对于这个例子，我们将自己添加翻译

00:08:32.490 --> 00:08:35.315
所以在 messages.es.xlf 中

00:08:35.315 --> 00:08:39.879
我们发现我们项目中的每条消息都有一个部分

00:08:39.770 --> 00:08:41.532
在该部分中

00:08:41.532 --> 00:08:47.780
我们在源元素下找到翻译的 ID 和原始文本

00:08:47.780 --> 00:08:53.515
我们的下一步是向名为 target 的源元素添加
同级元素

00:08:53.390 --> 00:08:58.070
target 表示此语言环境的翻译文本

00:08:58.070 --> 00:09:00.020
让我们现在进行这些更新

00:09:00.020 --> 00:09:01.400
这是关键时刻

00:09:01.400 --> 00:09:04.940
是时候查看我们的本地化应用程序了

00:09:04.940 --> 00:09:08.270
从命令行，我们将运行 ng serve

00:09:08.270 --> 00:09:11.534
现在在浏览器中检查我们的应用程序

00:09:11.534 --> 00:09:16.479
我们已经有了它 —— 一个完全国际化和本地化
的应用程序

00:09:16.380 --> 00:09:18.110
多么令人兴奋啊

00:09:18.110 --> 00:09:20.714
ng serve 只是我们的开发服务器

00:09:20.714 --> 00:09:24.967
我们还可以使用 ng build 构建应用程序的
本地化版本

00:09:24.967 --> 00:09:28.613
并传递本地化标志来构建我们所有的语言环境

00:09:28.613 --> 00:09:33.821
或者将其关闭以构建 angular.json 中构建
配置中指定的语言环境

00:09:33.560 --> 00:09:37.524
我将使用本地服务器来为我们的构建提供服务

00:09:37.430 --> 00:09:38.142
接下来

00:09:38.142 --> 00:09:43.532
我将转到本地主机端口 3000/es 以获取西
班牙语语言环境

00:09:43.430 --> 00:09:45.290
我们有了它

00:09:45.290 --> 00:09:53.892
我们还可以转到 en-US 以获取英语语言环
境以及你为此示例配置的任何其他语言环境

00:09:53.780 --> 00:09:56.540
现在，我们可以看到本地服务器的变化

00:09:56.540 --> 00:09:58.543
当部署应用程序时

00:09:58.543 --> 00:10:02.313
我们需要配置服务器、base href 等

00:10:02.313 --> 00:10:06.201
以正确地向用户显示他们的首选语言

00:10:06.200 --> 00:10:11.055
Angular 文档有一些关于如何设置这些的
重要信息

00:10:11.055 --> 00:10:14.116
你可以在下面的描述中找到链接

00:10:14.010 --> 00:10:21.156
最后要注意的一件事 —— 你可能想知道为什么
我们需要为每个区域设置一个版本的 Web
应用程序

00:10:20.990 --> 00:10:24.546
为什么不遵循其他解决方案定义的模式？

00:10:24.546 --> 00:10:27.390
好吧，这些都是一些很好的问题

00:10:27.390 --> 00:10:33.310
首先要考虑的是翻译步骤是作为构建后过程
的一部分完成的

00:10:33.200 --> 00:10:37.400
因此你的构建时间不受本地化步骤的影响

00:10:37.400 --> 00:10:38.495
接下来

00:10:38.495 --> 00:10:43.970
考虑实时更改应用程序语言的性能成本

00:10:43.970 --> 00:10:48.131
为了能够在不重新加载页面的情况下更改语言

00:10:48.131 --> 00:10:51.599
每个翻译字符串都将创建一个新的绑定

00:10:51.500 --> 00:10:55.468
但大多数时候，用户不会更改语言

00:10:55.468 --> 00:10:59.040
因此这些绑定的值将保持不变

00:10:59.040 --> 00:11:01.307
然后，当变更检测运行时

00:11:01.307 --> 00:11:03.677
即使你没有更改任何内容

00:11:03.677 --> 00:11:05.841
它也必须检查所有绑定

00:11:05.840 --> 00:11:06.561
此外

00:11:06.561 --> 00:11:12.614
每个绑定都是添加到应用程序包中的额外指令

00:11:12.470 --> 00:11:16.760
要在运行时更改语言需要传送翻译库

00:11:16.760 --> 00:11:20.270
这也会增加你的应用程序大小

00:11:20.270 --> 00:11:24.800
还有另一个考虑因素 —— 翻译文件不可摇树优化

00:11:24.800 --> 00:11:26.750
让我再解释一下

00:11:26.750 --> 00:11:31.657
一个应用程序可以有数千个给定语言的翻译
字符串

00:11:31.550 --> 00:11:33.463
对于选定的语言

00:11:33.463 --> 00:11:37.800
很难知道哪些翻译会被使用，哪些不会

00:11:37.800 --> 00:11:42.819
在运行时应用翻译意味着我们要加载所有翻译
字符串

00:11:42.819 --> 00:11:46.419
即使它们没有在你的应用程序中使用

00:11:46.310 --> 00:11:49.449
因为 Angular 会在构建时进行本地化

00:11:49.449 --> 00:11:52.680
所以我们只会包含应用中使用的字符串

00:11:52.680 --> 00:11:55.550
当然，Angular 解决方案也有成本

00:11:55.550 --> 00:12:00.419
每当你的用户选择你的应用程序支持的
新语言环境时

00:12:00.419 --> 00:12:03.361
你都必须刷新页面才能看到翻译

00:12:03.260 --> 00:12:06.020
现在，每种方法都有其权衡取舍

00:12:06.020 --> 00:12:11.255
Angular 的构建时间 i18n 针对负载和性能
进行了优化

00:12:11.150 --> 00:12:14.430
我们相信用户不会过于频繁地更改语言环境

00:12:14.430 --> 00:12:14.989
因此

00:12:14.989 --> 00:12:18.680
页面重新加载一次是一个合理的权衡

00:12:18.680 --> 00:12:19.245
朋友们

00:12:19.245 --> 00:12:22.071
如果你确实需要在运行时加载你的翻译

00:12:22.071 --> 00:12:25.220
有一种方法可以使用美元符号本地化来完成

00:12:25.220 --> 00:12:27.170
但这也是一次性的

00:12:27.170 --> 00:12:31.250
如果你有兴趣，请看下面的文档链接

00:12:31.250 --> 00:12:33.290
好吧，朋友，这对我有用

00:12:33.290 --> 00:12:34.254
这很有趣

00:12:34.254 --> 00:12:38.430
我希望你今天和我们一起度过了愉快的时光

00:12:38.430 --> 00:12:39.920
这个示例项目

00:12:39.920 --> 00:12:43.817
指向官方 Angular 国际化指南的链接

00:12:43.817 --> 00:12:47.600
以及更多内容都在这个视频的描述中

00:12:47.600 --> 00:12:50.872
喜欢这个视频，如果还没有订阅就订阅吧

00:12:50.872 --> 00:12:53.780
朋友们，下次再去构建出色的应用吧

00:12:53.780 --> 00:12:56.830
[音乐播放]