Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
问题描述
本文涉及到的代码位置:https://github.com/wangzixi-d...
我有一个能接受内容投影的 Angular Component:
文章图片
使用如下代码消费这个 Component:
文章图片
但是遇到运行时错误,如下图所示。
点击 template.html:7:3
:
文章图片
文章图片
问题分析
抛出该错误消息的函数实现:
/**
* Returns the value associated to the given token from the NodeInjectors => ModuleInjector.
*
* Look for the injector providing the token by walking up the node injector tree and then
* the module injector tree.
*
* This function patches `token` with `__NG_ELEMENT_ID__` which contains the id for the bloom
* filter. Negative values are reserved for special objects.
*- `-1` is reserved for injecting `Injector` (implemented by `NodeInjector`)
*
* @param tNode The Node where the search for the injector should start
* @param lView The `LView` that contains the `tNode`
* @param token The token to look for
* @param flags Injection flags
* @param notFoundValue The value to return when the injection flags is `InjectFlags.Optional`
* @returns the value from the injector, `null` when not found, or `notFoundValue` if provided
*/
function getOrCreateInjectable(tNode, lView, token, flags = InjectFlags.Default, notFoundValue)
第一个输入参数
tnode
就是 p
节点本身:![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/6ff271730d8d4f75aa2a66b226ba2447.jpg)
文章图片
![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/53d9837e109b4b71a3ddeb1486764c9b.jpg)
文章图片
token 指向
TemplateRef
:![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/16a8e206866142fea0942122a2ae178e.jpg)
文章图片
解决方案 这个问题有几种解决方案。
方案1 删除 p 节点的自定义 Directive:
![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/fd4f88e42a134d51810a39ee0ca196de.jpg)
文章图片
然后添加一个默认的内容投影:
![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/74ac0fde79fb4d5c9267682a51124bde.jpg)
文章图片
解决方案2 删除自定义 Directive 构造函数里的
TemplateRef
依赖:![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/290e098d2e9648208e5dd3077cfe5b7a.jpg)
文章图片
![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/a6e7b4ff2979497fb3896d880a1fe72f.jpg)
文章图片
解决方案3 消费 zippy Component 时,直接传入被投影的内容:
![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/4da3368845c14de283b5911acec4aa06.jpg)
文章图片
该内容会被投影到下图第一行的 place holder:
![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/8c4b448ad5ea4e9c8df099b021d26299.jpg)
文章图片
![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/a21d571605614dec9f8059aa0e828add.jpg)
文章图片
解决方案4 消费 Component 时,通过
ng-template
+ 自定义 Directive
的方式指定被投影的内容:![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/8ffa59e2c9334c128e6530bd372909b2.jpg)
文章图片
通过
@ContentChild
conten query 拿到自定义 Directive 实例,进而拿到 Directive 指向的 TemplateRef
:![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/0a9924749d374e2f9d7d9bee03424850.jpg)
文章图片
![Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试](https://img.it610.com/image/info9/261c74c20b0f43c0884e51ffc8874a4a.jpg)
文章图片
总结 【Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试】渲染树是实际的 DOM 渲染树。 它与
Ivy
的逻辑树不同,渲染树必须考虑内容投影。 因此渲染树里的父/子关系不像逻辑视图中那样简单。推荐阅读
- 关于|关于 Angular view Query 的 id 选择器问题的单步调试
- Angular|Angular 内容投影 content projection 关于条件渲染问题的单步调试
- Angular|Angular 内容投影 content projection 关于选择器问题的单步调试
- Angular|Angular 基于自定义指令的内容投影 content projection 问题的单步调试
- 安全|安全防护基本知识
- [gRPC|[gRPC via C#] gRPC本质的探究与实践
- Python数据可视化|python 数据可视化01
- 设计模式~代理模式
- 前端架构三大巨头之一|前端架构三大巨头之一 Angular | 深度讲解
- 关于Angular引入swiper后autoplay失效的解决办法