Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试

简介: Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
+关注继续查看

问题描述

本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic

我有一个能接受内容投影的 Angular Component:

image.png使用如下代码消费这个 Component

image.png但是遇到运行时错误,如下图所示。

点击 template.html:7:3:

image.png

image.png

问题分析

抛出该错误消息的函数实现:

/**
 * 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 节点本身:

15.png

image.pngtoken 指向 TemplateRef

16.png

解决方案

这个问题有几种解决方案。

方案1

删除 p 节点的自定义 Directive:

image.png

然后添加一个默认的内容投影:

image.png

image.png

解决方案2

删除自定义 Directive 构造函数里的 TemplateRef 依赖:

17.png

18.png

解决方案3

消费 zippy Component 时,直接传入被投影的内容:

image.png

该内容会被投影到下图第一行的 place holder:

image.png

19.png

解决方案4

消费 Component 时,通过 ng-template + 自定义 Directive 的方式指定被投影的内容:

image.png

通过 @ContentChild conten query 拿到自定义 Directive 实例,进而拿到 Directive 指向的 TemplateRef

20.png

21.png

总结

渲染树是实际的 DOM 渲染树。 它与 Ivy 的逻辑树不同,渲染树必须考虑内容投影。 因此渲染树里的父/子关系不像逻辑视图中那样简单。

目录
相关文章
关于 Angular view Query 的 id 选择器问题的单步调试
关于 Angular view Query 的 id 选择器问题的单步调试
73 0
关于 Angular view Query 的 id 选择器问题的单步调试
|
前端开发 JavaScript
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
45 0
通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
|
存储 JavaScript 前端开发
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
102 0
通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
|
存储
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
57 0
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
Angular 内容投影 content projection 关于条件渲染问题的单步调试
Angular 内容投影 content projection 关于条件渲染问题的单步调试
67 0
Angular 内容投影 content projection 关于条件渲染问题的单步调试
|
JavaScript
Angular 内容投影 content projection 关于选择器问题的单步调试
Angular 内容投影 content projection 关于选择器问题的单步调试
47 0
Angular 内容投影 content projection 关于选择器问题的单步调试
|
Web App开发 JavaScript C#
Angular 内容投影 content projection 的一个问题的单步调试
Angular 内容投影 content projection 的一个问题的单步调试
46 0
Angular 内容投影 content projection 的一个问题的单步调试
|
Web App开发 JSON 运维
在生产环境中调试 Angular 应用程序而不显示源映射
当我们的 Angular 应用程序部署到生产环境时,我们经常会遇到与我们在开发过程中编辑的不同的代码。我们的代码在构建过程中会以各种方式进行修改和优化。
138 0
在生产环境中调试 Angular 应用程序而不显示源映射
|
Web App开发 测试技术 C++
Angular最新教程-第三节在谷歌浏览器中调试Angular
Angular最新教程-第三节在谷歌浏览器中调试Angular
456 0
Angular最新教程-第三节在谷歌浏览器中调试Angular
|
JavaScript 容器
【Angular教程】-内容投影/@ContentChild/@ViewChild
【Angular教程】-内容投影/@ContentChild/@ViewChild
203 0
【Angular教程】-内容投影/@ContentChild/@ViewChild
推荐文章
更多