-
Notifications
You must be signed in to change notification settings - Fork 1
/
NG0300.cn.vtt
147 lines (99 loc) · 3.76 KB
/
NG0300.cn.vtt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
WEBVTT
Kind: subtitles
Language: zh-CN
00:00.000 --> 00:02.700
Multiple components match node with tag name.
00:02.700 --> 00:06.900
当你遇到本错误时，意味着有两个或更多组件使用了相同的元素名
00:07.000 --> 00:10.400
同一个 ngModule 中的所有组件，其元素选择器
00:10.400 --> 00:13.800
必须是唯一的。因为如果有名字冲突，Angular 就没办法
00:13.800 --> 00:16.800
知道应该在模板中渲染哪一个组件
00:16.900 --> 00:21.100
我们来看一个简单的错误重现，并且在代码中快速修复它
00:21.100 --> 00:25.600
我们有一个选择器为 mat-icon 的图标组件
00:25.600 --> 00:28.600
该组件在 AppComponent 的模板中使用此选择器声明过了
00:28.600 --> 00:32.200
但是当我们试图运行此应用时却出错了
00:32.300 --> 00:36.200
因为多个组件都能匹配标签名为 mat-icon 的节点
00:36.200 --> 00:39.000
高级点的 IDE 能够捕获本错误
00:39.000 --> 00:42.100
注意，当我们悬浮在红色下划线上方时，我们得到了反馈
00:42.100 --> 00:45.100
说是多于一个组件匹配此元素
00:45.200 --> 00:48.500
另外，它还会告诉我们具体是哪些类发生了冲突
00:48.700 --> 00:51.600
在这里是 mat-icon 和 IconComponent
00:51.800 --> 00:55.100
另外，我们可以在浏览器控制台中的错误开始调试
00:55.100 --> 00:57.800
在错误堆栈中找到该模板的链接
00:57.800 --> 01:00.000
以确定代码中的哪一行导致了这个问题
01:00.100 --> 01:03.600
然后，我们还要找出哪两个组件共享了同一个选择器
01:03.600 --> 01:07.500
第一种技巧是尝试使用 VS Code 的全局搜索功能
01:07.500 --> 01:10.900
使用 Control Shift F 来调出搜索栏，并且查找
01:10.900 --> 01:13.200
使用了此选择器名的任意文件
01:13.300 --> 01:15.800
如果你的代码中有两个冲突的组件
01:15.800 --> 01:17.300
只要把其中一个改名就可以了
01:17.300 --> 01:21.200
不过，在这个例子中，我们只找到了一个，这意味着
01:21.200 --> 01:23.900
此冲突是第三方库导致的
01:23.900 --> 01:28.300
因为你无法控制第三方库中的组件名
01:28.300 --> 01:31.400
所以你唯一的选择是把你的本地组件改名
01:31.400 --> 01:35.800
注意，当我们把 mat-icon 改为 app-icon 时，错误消失了
01:36.000 --> 01:38.700
你可以遵循一些最佳实践
01:38.700 --> 01:40.600
来避免发生此类错误
01:40.600 --> 01:42.700
选择器应该遵循特定的格式
01:42.700 --> 01:45.900
也就是中线格式。虽然你可以用单个单词作为选择器
01:45.900 --> 01:51.300
但一般来说最好还是使用一组固定的字符作为前缀
01:51.400 --> 01:55.300
当你使用 Angular CLI 时，它会使用 app 作为你组件的前缀
01:55.400 --> 01:58.300
默认情况下，这种规约便于区分
01:58.300 --> 02:01.700
你自己代码中的本地组件和那些来自
02:05.100 --> 02:08.500
另一个有帮助的最佳实践是把每个组件放在一个文件中
02:08.700 --> 02:12.000
当你在每个文件中都有一个组件时，文件名通常与
02:12.100 --> 02:15.200
选择器名称一一对应，这样你代码中的两个组件就
02:15.200 --> 02:18.700
很难共享同一个选择器名
02:18.900 --> 02:20.300
我们来回顾一下
02:20.300 --> 02:23.700
当你遇到 the multiple components match node with tag name 错误时
02:23.700 --> 02:26.500
说明在两个或多个组件中存在着名字冲突
02:26.500 --> 02:29.200
这通常需要你在一个本地组件中修改
02:29.200 --> 02:31.600
此选择器名称
02:31.800 --> 02:34.900
确保遵循一些最佳实践，来消除此类错误
02:34.900 --> 02:39.300
欲知详情，请参阅 Angular 官方文档中的风格指南