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

Angularcontentprojectioncontentprojectionselector问题的单步调试

时间:2023-04-02 14:49:32 HTML

问题描述我定义了一个Component,可以让consumerComponents通过contentprojection投射他们自定义的内容:import{Component}from'@angular/core';@Component({选择器:'app-zippy-basic',模板:`默认值:问题:`})导出classZippyBasicComponent{}其中包含默认和问题两个区域。对于提问区,只有在消费了Component提供的内容并且满足第10行指定的selector时,内容才能投射到app-zippy-basic内部。我的消费代码如下:带问号的p节点

普通p节点

我的预期结果:公共p节点出现在默认区域;带问号的p节点出现在问题区域。实测结果:题区为空。问题分析根据Angular官网的定义,select="[question]"的语法含义是将消费组件中带有question属性的dom节点投影到app-zippy-basic中。所以要把第23行的#去掉,这样就可以生成一个带有question属性的p节点:去掉之后,p节点如我们所料显示在默认区域:下面通过单步调试的方法找到如何选择和投影具有问题属性的p节点。Angular框架内部维护了一个叫做LView或者LogicView的数据结构,它是一个数组:LView的内容:索引为21的数组元素,rawSlotValue,存放需要投射到问题区域的p,带有question属性节点。总结如果一个组件包含一个没有select属性的ng-content元素,该实例将接收所有与任何其他ng-content元素不匹配的投影组件。逻辑视图(LView)表示模板(TView)的实例。我们使用逻辑一词来强调开发人员如何从逻辑角度看待应用程序。ParentComponent包含一个ChildComponent。从逻辑的角度来看,我们认为ParentComponent包含ChildComponent,因此逻辑。逻辑一词与渲染树的最终概念形成对比。