Angular-内容投影

  1、单插槽内容投影（映射内容）     答：在组件模版中需要投影内容的位置添加指令，作为投影内容的占位符            在使用该组件时，在组件标签元素之间放置需要投影到组件模版中的内容，如：             // 组件模版                           // 使用组件时            

这个p标签是需要投影到组件模版中的内容

     2、多插槽内容投影（映射内容）     答：在组件模版中拥有多个插槽，通过在占位符上添加select属性来指定那些内容需要投影到该位置，可用的值有元素的属性、标签名、css类名、:not伪类的任意组合 注意当投影内容没有匹配到任何一个具名插槽时，会使用默认的插槽填充    如：     // 组件模版    

                                <—默认插槽-->            

      // 使用时    

                   

找到匹配属性为custAttr的插槽

            找到匹配标签名为b的插槽            

找到匹配class类名为content的插槽

           

使用默认插槽

             

  3、有条件的内容投影（容器+模版组合）     答：使用和组合实现由条件的内容投影，在标签上使用属性型指令ngTemplateOutlet来指定使用的模版内容，同时在组件类中使用@ContentChild或者@ContentChildren装饰器来获取对此模版内容的引用（即TemplateRef），如：     // 组件模版    

            

    // 组件类     @ContentChild(TemplateRef) content!: TemplateRef     要使用非空断言!，否则会报错       // 使用时             模版内容        4、将一块内容作为一个元素投影到指定位置（重命名内容块为某个位置的映射内容）     答：使用ngProjectAs属性将一块代码包装为一个完整的投影内容，打包投影到组件的指定位置     如：         // 组件模版        

                    

          // 使用时        

                                               

                                                          

    注意：无论是否定义或者是否显示，只要在使用该组件时提供了需要投影的内容，则都会初始化该内容     https://angular.cn/guide/content-projection