NG0302.tw.vtt

WEBVTT
Kind: subtitles
Language: zh-TW

00:00.640 --> 00:05.520
The pipe name could not be found.
你可能在模板中引用某个管道时遇到此错误

00:05.520 --> 00:10.880
它可能没有导入或正确命名

00:10.880 --> 00:16.880
就像组件和指令一样，管道也必须在 ngModule 中声明或导入

00:16.880 --> 00:22.480
另外，当在模板中引用时，此名字必须与管道装饰器中指定的名字相同

00:22.480 --> 00:27.440
这意味着每个管道都必须有一个名字，而且

00:27.440 --> 00:32.720
该名字在所属的 ngModule 中必须是唯一的
让我们看一个简单的错误重现及其解决方案

00:32.720 --> 00:37.680
然后，我们会更详细的研究管道，以便理解为何会发生本错误

00:37.680 --> 00:43.120
你可能注意到我们在使用 truncate 这个名字来引用此管道

00:43.120 --> 00:48.320
不过 VSCode 中的红色下划线告诉我们：Angular 无法找到具有这个名字的管道

00:48.320 --> 00:53.600
如果你没有在 VSCode 中看到本错误，也会在终端窗口或浏览器控制台中看到

00:53.600 --> 00:58.640
无论哪种情况，堆栈跟踪都会为你指出发生此问题的模板

00:58.640 --> 01:04.320
要想修复本错误，我们先要验证此管道在 ngModule 中是可用的

01:04.320 --> 01:09.040
这个例子中，我们试图在 AppModule 中使用此管道

01:09.040 --> 01:14.320
因为它是我们正在开发的项目中的自定义管道，所以它需要
像组件或指令一样，声明在此模块中

01:14.320 --> 01:19.840
另一些例子中，管道可能是由其它模块或第三方包导出的

01:19.840 --> 01:24.720
那种情况下，你可能要导入那个模块，而非把那个管道加入 declarations

01:24.720 --> 01:29.440
这里，我们已经验证过此管道在该 ngModule 中可用

01:29.440 --> 01:34.320
但是仍然有错误。接下来是检查该管道本身的定义

01:34.320 --> 01:39.760
特别是 Pipe 装饰器中的 name 选项

01:39.760 --> 01:44.560
注意，这里的管道名是 'shorten'，而模板中引用的是 'truncate'

01:44.560 --> 01:49.280
只要纠正这个小失误，就可以解决此问题了
既可以修正模板中引用的名字，也可以修改 Pipe 装饰器中的 name

01:49.280 --> 01:54.560
修复了此问题，我们还要指出一个最佳实践

01:54.560 --> 01:58.480
以防再发生当初那样的错误

01:58.480 --> 02:02.000
当你在 Angular 中创建一个管道时
它会遵循一个约定：管道的名字和定义它的文件名相匹配

02:02.000 --> 02:06.800
注意，这里的管道名是 'truncate'，而其文件名是 'truncate.pipe.ts'

02:06.800 --> 02:13.680
当使用 Angular CLI 时，会自动应用此最佳实践

02:13.680 --> 02:18.480
现在，我们已经知道如何解决本错误了
让我们在快速过一遍 Angular 中管道的工作原理

02:18.480 --> 02:23.120
以了解当初为什么会发生本错误
在 Angular 中，管道的角色是在模板中对值进行转换

02:23.120 --> 02:27.840
与常规的方法调用不同，Angular 可以对管道进行优化

02:27.840 --> 02:33.440
当你有一个表达式或值，并且需要把它重新格式化为金额或其它格式时，它会非常有用

02:39.280 --> 02:43.200
而且你也可以创建自己的管道集
当 Angular 在模板表达式中遇到管道符号（|）时

02:43.200 --> 02:48.320
它会使用管道名来决定哪个类拥有所要执行的函数

02:48.320 --> 02:53.760
如果提供了无效的名字，Angular 就没办法找到对应的函数

02:53.760 --> 02:58.720
而当有效时，它就会根据管道的名字匹配到管道类
该类实现了管道的 transform 函数

02:58.720 --> 03:03.840
这个 transform 函数接受模板中提供的值以及额外参数

03:03.840 --> 03:09.200
然后返回一个新的值，新值会显示给最终用户

03:09.200 --> 03:12.960
我们来回顾一下
当你遇到 PipeNameNotFoundError 时

03:12.960 --> 03:17.120
它意味着模板中引用的某个管道或者没有导入过

03:17.120 --> 03:21.360
或者没有被正确命名
要解决此问题，请先验证此管道已经导入了或者

03:21.360 --> 03:26.480
在适当的 ngModule 中声明过

03:26.480 --> 03:31.040
如果问题仍然存在，请检查管道本身的定义
以验证其名字是否匹配了模板中的名字

03:31.040 --> 03:36.240
欲知详情和范例，请阅读Angular官方文档