-
Notifications
You must be signed in to change notification settings - Fork 1
/
fUSAg4kp2WQ.cn.vtt
193 lines (130 loc) · 4.8 KB
/
fUSAg4kp2WQ.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
WEBVTT
Kind: subtitles
Language: zh-CN
00:00.512 --> 00:02.560
Export of name directive not found
00:02.816 --> 00:11.520
当你在模板中引用某个未定义过、未导入过的指令
或请求某个未声明过的导出名称时可能会遇到本错误
00:11.776 --> 00:14.336
我们来看一个简单的错误重现和解决方案
00:14.848 --> 00:18.944
然后我们会仔细研究下 Angular 模块，来更深刻的理解这个问题
00:19.712 --> 00:22.272
我们开始调试。先从浏览器中发现此错误
00:22.784 --> 00:26.368
并且运行 Angular 编译器的终端窗口也会输出此错误
00:26.624 --> 00:29.440
它会指引你找到存在未知引用的模板
00:29.952 --> 00:36.352
注意，IDE 是如何提醒我们的，它标出一个简单的拼写错误作为本错误的原因
00:36.608 --> 00:41.728
最可能的原因是那个 ngModule 中尚未导出此指令
00:42.496 --> 00:46.848
在这个例子中，所引用的 ngForm 是由 Angular Forms 模块导出的
00:47.616 --> 00:51.456
所以，我们可以通过把它导入 AppModule 来解决此问题
00:51.712 --> 00:54.016
把 forms 模块添加到 imports 数组中
00:54.784 --> 00:55.296
保存此文件
00:55.808 --> 00:59.136
然后注意警告信息和组件模板中的下划线都消失了
00:59.392 --> 01:02.464
这是因为 Angular 无法了解此指令
01:02.720 --> 01:04.512
除非它被导入了此 ngModule 中
01:05.024 --> 01:06.048
如果仍然没有解决
01:06.304 --> 01:07.840
首先尝试重启你的本地开发环境
01:08.608 --> 01:09.376
如果仍然有此错误
01:09.888 --> 01:12.192
请再次检查你导入了正确的 ngModule
01:12.704 --> 01:13.472
比如
01:13.728 --> 01:16.544
你可以在 Angular 官方文档中搜索这个指令名
01:17.056 --> 01:18.848
该指令的文档
01:19.104 --> 01:21.664
会告诉我们要导入的准确 ngModule
01:21.920 --> 01:28.832
另一种情况下你也可能遇到此错误，也就是当你试图在模板中使用你自己的自定义指令时
01:29.344 --> 01:30.368
我们来看看
01:30.624 --> 01:33.952
组件和指令都位于同一个 ngModule 中的情况
01:34.464 --> 01:36.768
该指令具有一个选择器
01:37.280 --> 01:40.864
不过，如果我们尝试把此指令赋值给一个模板变量
01:46.496 --> 01:49.312
为了把某个指令用作模板变量
01:49.568 --> 01:53.664
我们需要在指令装饰器中用 exportAs 选项定义一个名字
01:53.920 --> 01:57.248
一旦定义了导出名，本错误就消失了
01:57.504 --> 02:03.648
这里的要点是，当要把某个指令用作模板变量时，它必须具有一个导出名
02:04.672 --> 02:09.792
现在，我们已经知道了如何调试此问题，接下来让我们深入了解下 Angular 模块与指令
02:10.048 --> 02:11.840
以理解以前为什么会出现此错误
02:12.608 --> 02:14.400
当你在 Angular 中创建 ngModule 时
02:14.656 --> 02:16.448
你会声明组件和指令
02:16.704 --> 02:18.752
它们只会在此模块内部（私有）使用
02:19.520 --> 02:21.824
但是在某些情况下，你在这里定义的组件和指令
02:22.080 --> 02:24.384
可能要在此模块外部使用
02:25.152 --> 02:28.480
你通过把它们添加到 exports 中，来把它们公开
02:29.248 --> 02:32.064
这就是我们在ngModule之间共享组件与指令的方式
02:32.832 --> 02:37.952
但是要记住，当使用指令时，你还要考虑要如何在模板中消费它们
02:38.720 --> 02:39.232
比如
02:39.488 --> 02:40.768
我们有一个指令
02:41.280 --> 02:42.048
一个名为 NgForm 的类
02:43.072 --> 02:46.912
如果其目标是作为元素的 Property 或 Attribute 使用
02:47.680 --> 02:52.288
我们就要定义成类似 class 或 attribute CSS 选择器的选择器
02:52.800 --> 02:56.384
该指令会在模板中遇到此选择器时被实例化
02:56.896 --> 02:57.408
不过
02:57.664 --> 03:02.272
如果目标是把该指令用作模板变量，那么这种方式就不行
03:02.784 --> 03:05.088
所以，我们要设置一个 exportAs 名称
03:05.344 --> 03:09.952
以便让 Angular 了解这个名字，从而把该指令赋值给某个模板变量
03:10.976 --> 03:11.744
我们来回顾一下
03:12.000 --> 03:15.584
当你遇到 Export of name directive not found 错误时
03:16.096 --> 03:18.912
可以这样调试：找出引用此指令的模板
03:19.168 --> 03:21.984
然后决定要导入哪个 ngModule
03:22.240 --> 03:23.776
一旦找到了这个模块
03:24.032 --> 03:26.336
就把它导入你所在的 ngModule 中
03:27.104 --> 03:30.176
如果该问题与 ngModule 导入无关
03:30.432 --> 03:33.504
检查该指令的装饰器中是否具有 exportAs 属性
03:33.760 --> 03:36.576
并且在声明模板变量时正确设置了它
03:37.088 --> 03:40.416
欲知详情和范例，请阅读Angular官方文档