当前位置: 首页 > Web前端 > HTML

Angularcontentprojection出现NoproviderforTemplateReffound错误单步调试

时间:2023-04-02 19:52:00 HTML

问题描述本文涉及的代码位置:https://github.com/wangzixi-d...我有一个AngularComponent可以接受内容projection:使用如下代码消费该Component:但是遇到运行时错误,如下图。点击template.html:7:3:问题分析出该错误消息的函数现实:/***从NodeInjectors=>ModuleInjector返回与给定标记关联的值。**通过遍历节点注入器树然后*模块注入器树来查找提供令牌的注入器。**此函数使用包含bloom*过滤器ID的__NG_ELEMENT_ID__修补`token`。负值保留给特殊对象。*-`-1`保留用于注入`Injector`(由`NodeInjector`实现)**@paramtNode应该开始搜索注入器的节点*@paramlView包含`tNode`的`LView`*@paramtoken要查找的标记*@paramflags注入标志*@paramnotFoundValue当注入标志为“InjectFlags.Optional”时要返回的值*@returns来自注入器的值,未找到时为“null”,或“notFoundValue`如果提供*/functiongetOrCreateInjectable(tNode,lView,token,flags=InjectFlags.Default,notFoundValue)第一个输入参数tnode是p节点本身:token指向TemplateRef:解决方案这个问题有几种解决方案。解决方案1??删除p节点的自定义Directive:然后添加一个默认的内容投影:解决方案2删除自定义Directive构造函数中的TemplateRef依赖:解决方案3消费zippyComponent时,直接传入投影内容:内容将是投影到下图第一行的占位符:方案4消费Component时,使用ng-template+CustomizetheDirective指定投影内容:通过@ContentChildconten查询获取自定义Directive实例,然后获取Directive指向的TemplateRef:摘要渲染树就是实际的DOM渲染树。它不同于Ivy的逻辑树,其中渲染树必须考虑内容投影。所以渲染树中的父子关系并不像逻辑视图中那么简单。