问题形容
本文波及到的代码地位: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
节点自身:
token 指向 TemplateRef
:
解决方案
这个问题有几种解决方案。
计划 1
删除 p 节点的自定义 Directive:
而后增加一个默认的内容投影:
解决方案 2
删除自定义 Directive 构造函数里的 TemplateRef
依赖:
解决方案 3
生产 zippy Component 时,间接传入被投影的内容:
该内容会被投影到下图第一行的 place holder:
解决方案 4
生产 Component 时,通过 ng-template
+ 自定义 Directive
的形式指定被投影的内容:
通过 @ContentChild
conten query 拿到自定义 Directive 实例,进而拿到 Directive 指向的 TemplateRef
:
总结
渲染树是理论的 DOM 渲染树。它与 Ivy
的逻辑树不同,渲染树必须思考内容投影。因而渲染树里的父 / 子关系不像逻辑视图中那样简略。