-
Notifications
You must be signed in to change notification settings - Fork 1
/
NG8002.cn.vtt
149 lines (103 loc) · 4.73 KB
/
NG8002.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
WEBVTT
Kind: subtitles
Language: zh-CN
00:00.400 --> 00:05.360
Can't bind to prop name because it isn't a known property of node.
00:05.360 --> 00:10.160
你可能在试图绑定某元素的 Property 或 Attribute，而
00:10.160 --> 00:15.600
这可能出于多种原因。如果它是 Angular 组件
00:15.600 --> 00:20.640
它可能在组件定义中忘了写 @Input 装饰器。但是如果它是原生 HTML 元素
00:20.640 --> 00:25.520
它可能只是因为该属性不存在。或者，如果你在使用自定义元素或 Web Components
00:25.520 --> 00:30.080
它可能需要进行额外的配置，以绑定到自定义属性
00:30.080 --> 00:35.520
让我们先快速过一遍 Angular 属性绑定的工作原理
00:35.520 --> 00:39.600
然后，我们会检查一些错误重现并解决它们
00:39.600 --> 00:44.000
在 Angular 模板中，我们可以通过把属性包裹在方括号中来绑定它
00:44.000 --> 00:49.040
并且在其右侧提供表达式。当表达式的值发生变化时，被绑定的属性
00:49.040 --> 00:54.640
及其对应的 UI 都会自动更新
通常，你会在使用自定义组件时会遇到未知属性的问题
00:54.640 --> 00:59.600
在我们的代码中，我们有一个带有 name 属性的 ItemComponent
00:59.600 --> 01:05.520
然后，在 AppComponent 模板中，我们引用了 ItemComponent
01:05.520 --> 01:10.800
并试图绑定到其 name 属性
但现在，Angular 告诉我们它无法绑定到 name
01:10.800 --> 01:15.920
因为它不是一个 'app-item' 的已知属性
我们可以通过回到 ItemComponent，并且
01:15.920 --> 01:22.080
为 name 属性添加 @Input 装饰器来解决此问题
01:22.080 --> 01:28.000
这个 @Input 装饰器允许数据进行绑定或者说通过模板从组件的外部传入
01:28.000 --> 01:32.960
换句话说，如果某个属性没有被指定为 @Input，它就不能
01:32.960 --> 01:37.760
在模板中使用方括号进行数据绑定
另请注意，你可以给 @Input 装饰器传入参数
01:37.760 --> 01:42.880
以改变该属性的名字
01:42.880 --> 01:48.080
这可以让你能在模板中使用与其组件内部属性名不同的名字
01:48.080 --> 01:53.440
另外，你的自定义组件还可能出现与原生 HTML 元素相关的问题
在默认配置下
01:53.440 --> 01:58.240
你只能绑定 Angular 编译器认识的属性
01:58.240 --> 02:03.600
当使用原生 HTML 元素时，它认识来自 HTML 规范的 Property 和 Attribute
02:03.600 --> 02:09.120
比如，对于 Input 元素，我们可以绑定到该元素的 value 属性
02:09.120 --> 02:13.840
这时不会发生错误，因为 value 是 input 的一个有效属性
02:13.840 --> 02:18.640
但如果我们试图绑定到一个不存在的属性，Angular 就会抛出错误
02:18.640 --> 02:23.280
虽然并没有什么好的理由绑定到原生 HTML 元素中不存在的属性
02:23.280 --> 02:29.440
但是仍然可以告诉 Angular 在某个 ngModule 中忽略这个错误
02:29.440 --> 02:36.000
添加到 ngModule 装饰器中的 schemas 数组中
02:36.000 --> 02:41.360
注意，当我们修改这个 schema 的时候，错误消失了，但是要记住
02:41.360 --> 02:46.240
这项技巧只应该作为不得已的手段使用，因为它会忽略所有此类错误
02:46.240 --> 02:51.920
而这会在未来给我们带来未捕获的问题和不稳定的代码
02:51.920 --> 02:56.480
另一个你可能遇到此问题的地方是使用 Web Components 或自定义元素时
02:56.480 --> 03:02.000
当使用自定义元素时，绑定到一个 Angular 不认识的属性是完全可以的
03:02.000 --> 03:07.200
我们可以用一种更保守的方式告诉 Angular 忽略本错误
那就是在 ngModule 中使用 CUSTOM_ELEMENTS_SCHEMA
03:07.200 --> 03:13.760
这会告诉 Angular 在自定义元素上忽略其已知属性的错误
03:13.760 --> 03:17.840
就像它们是你自己的 Angular 组件或第三方 Web 组件一样
03:18.480 --> 03:22.880
它会允许你在自定义元素上绑定任意属性，但是当
03:22.880 --> 03:28.000
在原生 HTML 元素上绑定到不存在的属性时仍然会报错
03:28.000 --> 03:32.800
我们来回顾一下
当你遇到 'Can't bind to prop name since it isn't a known property of node'
03:32.800 --> 03:37.600
错误时，你首先要验证一下此属性名对 Angular 是已知的
03:37.600 --> 03:43.280
原生 HTML 元素只应该使用基于现行 HTML 规范的属性
03:43.280 --> 03:48.400
当使用自定义元素时，你可以通过在 ngModule 中
使用 CUSTOM_ELEMENTS_SCHEMA 来忽略本错误
03:48.400 --> 03:54.080
作为不得已的手段，你可以使用 NO_ERRORS_SCHEMA 来忽略所有此类错误
03:54.080 --> 03:58.960
欲知详情和范例，请参阅 Angular 官方文档的属性绑定指南