Getting Started with Standalone Components in Angular-x5PZwb4XurU.cn.vtt

WEBVTT
Kind: subtitles
Language: zh-CN

00:00:00.682 --> 00:00:01.890
JESSICA JANIUK： 嘿，朋友们

00:00:01.890 --> 00:00:03.312
我是 Jessica

00:00:03.312 --> 00:00:07.906
今天我独自站在这里向你介绍
我们最新的功能

00:00:07.906 --> 00:00:09.109
即独立组件

00:00:09.000 --> 00:00:22.520
[音乐播放] Angular 应用程序由组件组成

00:00:22.520 --> 00:00:23.690
直到现在

00:00:23.690 --> 00:00:31.230
开发人员都必须创建或更新现有的 ng 模块
才能使用新创建的组件

00:00:31.100 --> 00:00:38.821
Ng 模块用来指定哪些组件、指令和管道
可用于模板

00:00:38.660 --> 00:00:45.200
新的独立 API 使编写 Angular
组件、指令和管道

00:00:45.200 --> 00:00:48.606
而无需创建关联的 ng 模块成为可能

00:00:48.470 --> 00:00:51.101
独立组件是自包含的

00:00:51.101 --> 00:00:54.840
直接管理它们的模板依赖关系

00:00:54.840 --> 00:00:59.952
这使得 ng 模块对于许多实际的开发任务来
说是可选的

00:00:59.850 --> 00:01:04.540
重点从 ng 模块转移到组件

00:01:04.540 --> 00:01:08.050
组件正在成为 Angular 的核心概念

00:01:08.050 --> 00:01:11.080
让我们讨论一下这种新方法的好处

00:01:11.080 --> 00:01:16.660
使 ng 模块可选减少了创建新组件的阻力

00:01:16.660 --> 00:01:19.135
只需编写更少的代码

00:01:19.135 --> 00:01:21.870
打开和修改的文件更少

00:01:21.870 --> 00:01:24.630
但这不仅仅是语法更改

00:01:24.630 --> 00:01:29.310
我们减少了开发人员需要理解的概念数量

00:01:29.310 --> 00:01:33.960
这对于简化 Angular 学习之旅至关重要

00:01:33.960 --> 00:01:35.691
最重要的是

00:01:35.691 --> 00:01:41.670
自包含组件可以自行打包、重用和惰性加载

00:01:41.670 --> 00:01:48.313
这让以前很难甚至不可能实现的一系列
使用场景成为可能

00:01:48.180 --> 00:01:50.374
为了感受这些新的 API

00:01:50.374 --> 00:01:54.240
让我们为本地爱狗社区创建一个应用程序

00:01:54.240 --> 00:01:58.890
它可以用来安排邻居之间的互助遛狗

00:01:58.890 --> 00:02:02.890
此应用程序有一个列表和详细信息视图

00:02:02.890 --> 00:02:07.259
让我们从使用 Angular CLI 搭建我们的
应用程序开始

00:02:07.170 --> 00:02:10.830
我在终端窗口中使用 ng new 命令

00:02:10.830 --> 00:02:14.970
我们将在此示例中使用内联模板和样式

00:02:14.970 --> 00:02:17.790
这就是我们使用 --inline 标志的原因

00:02:17.790 --> 00:02:19.184
我将添加路由

00:02:19.184 --> 00:02:22.080
以便我们可以在页面之间导航

00:02:22.080 --> 00:02:25.540
常规 CSS 将适用于我们的示例应用程序

00:02:25.540 --> 00:02:27.490
我们还需要一些数据来显示

00:02:27.490 --> 00:02:28.018
因此

00:02:28.018 --> 00:02:34.246
让我们使用 ng generate 命令快速生成
一些带有模拟数据的服务

00:02:34.140 --> 00:02:36.399
我切换到代码编辑器

00:02:36.399 --> 00:02:43.177
打开生成的 dogs.service.ts 文件并粘贴
我之前准备的一些示例数据

00:02:43.070 --> 00:02:45.311
完成所有准备工作后

00:02:45.311 --> 00:02:48.260
我可以创建第一个独立组件

00:02:48.260 --> 00:02:51.650
它将显示可以呼吸新鲜空气的狗的列表

00:02:51.650 --> 00:02:56.090
Angular CLI 将有助于快速构建组件代码

00:02:56.090 --> 00:02:56.784
请注意

00:02:56.784 --> 00:03:02.039
我将新的 --standalone 选项传递给 ng generate
原理图

00:03:01.940 --> 00:03:04.340
大胆的选择

00:03:04.340 --> 00:03:08.596
在我们生成的组件 DogsListComponent.ts 中

00:03:08.596 --> 00:03:12.852
组件装饰器有一个名为 standalone 的新属性

00:03:12.852 --> 00:03:14.473
其值设置为 true

00:03:14.270 --> 00:03:17.501
该组件现在是一个独立组件了

00:03:17.501 --> 00:03:20.990
不需要在任何 ng 模块中声明

00:03:20.990 --> 00:03:25.103
组件装饰器中还有另一个名为 imports 的
属性

00:03:25.103 --> 00:03:27.686
它有一个包含公共模块的数组

00:03:27.590 --> 00:03:33.626
现在组件可以使用 ngIf、ngFor
和其他控制流指令

00:03:33.500 --> 00:03:37.685
dogs 列表组件将显示来自 NOC 数据服务的
数据

00:03:37.685 --> 00:03:42.631
该数据服务注入到 DogsListComponent.ts
的构造函数中

00:03:42.440 --> 00:03:43.594
准备好数据后

00:03:43.594 --> 00:03:48.919
我们可以将一些基本的 HTML 添加到 component.html
并显示数据

00:03:48.830 --> 00:03:52.430
稍后我们将改进此组件的外观

00:03:52.430 --> 00:03:54.680
在测试我们的列表组件之前

00:03:54.680 --> 00:03:56.210
我们还需要最后一步

00:03:56.210 --> 00:03:59.900
更新路由器配置

00:03:59.900 --> 00:04:07.972
我在之前由 CLI 生成的 AppRoutingModule.ts
文件中创建了一个新的路由条目

00:04:07.860 --> 00:04:08.692
接下来

00:04:08.692 --> 00:04:17.249
我们将使用路径和组件属性将我们的独立组件
直接添加到路由器配置路由变量中

00:04:17.130 --> 00:04:19.819
我还设置了一个路由器重定向

00:04:19.819 --> 00:04:22.110
以便默认显示我们的列表

00:04:22.110 --> 00:04:22.603
此时

00:04:22.603 --> 00:04:26.748
我们将有一个由独立组件渲染的工作列表页面

00:04:26.650 --> 00:04:28.230
让我们一起测试一下

00:04:28.230 --> 00:04:33.423
我将打开一个终端并使用 ng serve 命令
启动一个开发服务器

00:04:33.330 --> 00:04:41.997
让我们通过浏览器中的端口 4200 导航到
本地主机来确认一切都如预期般工作

00:04:41.870 --> 00:04:45.110
我们的列表渲染正常，但还不是很漂亮

00:04:45.110 --> 00:04:49.970
让我们通过引入狗狗卡片组件来改进设计

00:04:49.970 --> 00:04:51.919
再次使用 Angular CLI

00:04:51.919 --> 00:04:57.953
我在终端中使用 ng generate component
命令搭建了一个新的独立组件

00:04:57.860 --> 00:05:01.006
在 DogsListCardComponent.ts 中

00:05:01.006 --> 00:05:07.501
我将通过添加一些以前编写的代码来更新
组件装饰器的模板和样式属性

00:05:07.400 --> 00:05:17.040
狗的信息将作为输入传递到此组件中

00:05:17.040 --> 00:05:20.280
此时，我有两个独立的组件

00:05:20.280 --> 00:05:22.530
一张清单和一张卡片

00:05:22.530 --> 00:05:25.579
我怎么能在列表中使用卡片呢？

00:05:25.579 --> 00:05:30.773
让我切换回狗列表组件并导入我们刚刚创建
的卡片

00:05:30.660 --> 00:05:35.757
导入独立组件使其在模板中可用

00:05:35.757 --> 00:05:42.260
并且可以通过其选择器在组件模板中引用

00:05:42.260 --> 00:05:46.660
在这种情况下，app dogs list card

00:05:46.660 --> 00:05:49.175
请记住，在独立组件之前

00:05:49.175 --> 00:05:56.264
你必须添加对 ng 模块的引用才能使组件
可用于应用程序的其他部分

00:05:56.150 --> 00:05:59.650
现在不再需要了

00:05:59.650 --> 00:06:03.730
独立组件显式管理它们自己的依赖项

00:06:03.730 --> 00:06:06.375
通过预期组件的导入列表

00:06:06.375 --> 00:06:10.400
我们可以确切地知道模板中可用的内容

00:06:10.400 --> 00:06:14.020
这非常重要

00:06:14.020 --> 00:06:15.160
我们的清单完成了

00:06:15.160 --> 00:06:20.103
我现在将按照类似的编码模式创建详细信息
视图组件

00:06:20.000 --> 00:06:23.350
这是一个视图

00:06:23.350 --> 00:06:24.403
在命令行中

00:06:24.403 --> 00:06:29.860
我将再次使用 --standalone 选项键入 ng generate component

00:06:29.860 --> 00:06:32.040
在狗狗视图组件类中

00:06:32.040 --> 00:06:35.759
狗的 ID 将作为路由器参数传入

00:06:35.759 --> 00:06:41.658
因此我需要在构造函数中注入激活的路由和
狗狗服务

00:06:41.530 --> 00:06:48.418
设置对路由参数更改的订阅将确保我们在
页面之间导航时更新狗的数据

00:06:48.310 --> 00:06:51.120
要测试详细信息视图

00:06:51.120 --> 00:07:02.658
我们需要将狗狗视图组件添加到路由器配置并
从 ListComponentRoutes.ts 文件链接到它

00:07:02.510 --> 00:07:03.022
然后

00:07:03.022 --> 00:07:06.400
我们需要从 dogs 列表组件链接到它

00:07:06.400 --> 00:07:15.717
我们将通过打开 AppRoutingModule.ts
文件并在路由数组中添加新条目来更新路由器
配置

00:07:15.490 --> 00:07:17.399
有了新的路由条目

00:07:17.399 --> 00:07:23.013
我们现在可以打开 dogs 列表组件文件并
引入路由链接

00:07:22.900 --> 00:07:27.290
独立组件显式导入其模板依赖项

00:07:27.290 --> 00:07:32.595
所以我们需要将路由器模块添加到组件导入
列表中

00:07:32.480 --> 00:07:33.717
完成此步骤后

00:07:33.717 --> 00:07:38.665
我们可以使用路由器链接属性添加到
详细视图组件的链接

00:07:38.570 --> 00:07:56.440
我们现在可以测试应用程序的全部功能

00:07:56.440 --> 00:07:59.460
在浏览器中，我可以打开应用程序 URL

00:07:59.460 --> 00:08:00.970
仍然可以看到列表

00:08:00.970 --> 00:08:01.753
这很好

00:08:01.753 --> 00:08:08.462
但现在我还可以单击“详细信息”链接并
导航到专用于给定狗的页面

00:08:08.350 --> 00:08:08.861
至此

00:08:08.861 --> 00:08:13.972
我们知道了如何创建独立组件并管理它们的
模板依赖项

00:08:13.870 --> 00:08:20.268
我们还成功地使用路由在独立组件渲染的
页面之间导航

00:08:20.140 --> 00:08:25.102
我现在想重点介绍独立组件的主要好处之一

00:08:25.102 --> 00:08:27.010
即简化惰性加载

00:08:27.010 --> 00:08:34.260
Angular 路由器中的新功能支持细粒度的
惰性加载和组件级别的代码拆分

00:08:34.150 --> 00:08:36.031
为了在实践中演示它

00:08:36.031 --> 00:08:39.100
我们将惰性加载详细信息视图组件

00:08:39.100 --> 00:08:44.575
让我们导航到应用程序路由模块中的路由器
配置

00:08:44.575 --> 00:08:47.935
并更改狗狗视图组件的路由条目

00:08:47.810 --> 00:08:49.881
我们需要，

00:08:49.881 --> 00:08:54.540
一、将组件属性更改为加载组件

00:08:54.540 --> 00:08:59.160
二、将组件类型改为动态导入

00:08:59.160 --> 00:09:04.470
三，删除对组件类型的静态导入

00:09:04.470 --> 00:09:10.934
让我们确认 dog view 组件代码在浏览器中
是惰性加载的

00:09:10.810 --> 00:09:12.511
在 Chrome DevTools 中

00:09:12.511 --> 00:09:13.670
打开网络选项卡

00:09:13.670 --> 00:09:18.781
这样我们就可以在采取行动时观察惰性加载
的活动

00:09:18.670 --> 00:09:20.380
现在回到应用程序中

00:09:20.380 --> 00:09:22.090
单击“详细信息”链接

00:09:22.090 --> 00:09:27.714
你会注意到狗狗视图组件的代码在我们单击时
立即下载并执行

00:09:27.610 --> 00:09:30.034
这表明代码加载被延迟

00:09:30.034 --> 00:09:32.920
并且仅在加载根目录时发生

00:09:32.920 --> 00:09:36.926
这意味着应用程序可以更快地加载和引导

00:09:36.926 --> 00:09:40.066
因为这条路由不是主包的一部分

00:09:40.066 --> 00:09:41.690
而是单独加载的

00:09:41.690 --> 00:09:47.414
将应用程序中的路由切换到惰性加载模式只
用了几秒钟

00:09:47.300 --> 00:09:50.810
我们希望这能为开发人员带来更好的体验

00:09:50.810 --> 00:09:57.941
今天讨论的所有新功能和 API 现在都可以
在 Angular 版本 14 中使用

00:09:57.830 --> 00:10:03.230
独立组件与你现有的 Angular 应用程序
完全兼容

00:10:03.110 --> 00:10:06.342
它们不会引入任何重大更改

00:10:06.342 --> 00:10:08.540
也不需要任何重写

00:10:08.540 --> 00:10:09.655
在 v14 中

00:10:09.655 --> 00:10:13.670
我们发布了独立的 API 作为开发者预览

00:10:13.670 --> 00:10:17.818
这意味着 API 是完整的、完善的

00:10:17.818 --> 00:10:20.250
可供你试验和探索

00:10:20.250 --> 00:10:20.927
但是

00:10:20.927 --> 00:10:26.210
我们还没有准备好将它们标记为稳定的 API

00:10:26.210 --> 00:10:29.330
如果我们从开发者社区得到反馈

00:10:29.330 --> 00:10:32.450
认为它们在某些用例中运行不佳

00:10:32.450 --> 00:10:35.140
我们希望能够立即进行调整

00:10:35.140 --> 00:10:40.627
而无需等待稳定 API 的两个主要版本的
定期弃用时间表

00:10:40.520 --> 00:10:46.650
使 ng 模块可选需要对整个 Angular 生态
系统进行调整

00:10:46.530 --> 00:10:49.319
我们今天发布了核心功能

00:10:49.319 --> 00:10:52.350
但还有几个后续项目在排队

00:10:52.350 --> 00:10:57.971
我们将围绕独立组件不断改进 API、工具和
文档

00:10:57.840 --> 00:11:02.220
目标是使开发人员的旅程尽可能顺利

00:11:02.220 --> 00:11:06.745
我们非常希望你测试新的 API 并分享你的
反馈

00:11:06.640 --> 00:11:09.720
我们迫不及待地想听听你的新开发者体验

00:11:09.720 --> 00:11:13.654
如果你有问题、功能请求或其他问题

00:11:13.654 --> 00:11:17.220
请打开 GitHub 问题并告知我们

00:11:17.220 --> 00:11:23.294
示例项目和 Angular 文档的链接位于
该视频的说明中

00:11:23.170 --> 00:11:27.447
订阅此频道并在 Twitter 上关注我们以
获取更多更新

00:11:27.360 --> 00:11:30.034
在你的 Angular 学习之旅中

00:11:30.034 --> 00:11:32.400
该视频肯定不是独一份

00:11:32.400 --> 00:11:34.870
还有更多让你享受

00:11:34.870 --> 00:11:36.780
谢谢各位的观看

00:11:36.780 --> 00:11:39.480
嘿，长寿与繁荣，朋友们

00:11:39.480 --> 00:11:41.930
[音乐播放]