角向组件传递模板的两种方法

　　

最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式。为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的。这时候,组件的一部分模板就需要由调用方提供。

　　

在反应里面,这种需求挺简单的,只要实现一个<代码>日期=比;元素这样的函数就好了,但是角模板是纯粹的模板,需要使用一些专门的概念才能实现这个功能。

　　


　　

　　

& lt; ng-content>这个标签到本文撰写时为止,还没有官方的文档,甚至连占位符都没有。但是这并不妨碍我们的使用,外国热心网友已经总结出了& lt; ng-content>在现阶段的特点与作用。

　　

基本用法
　　

　　 　　 　　& lt; !——Wrapper.Component。html——比; 　　& lt; div> 　　你好 　　& lt; ng-content> & lt;/ng-content> 　　& lt;/div> 　　 　　

假设我们有一个上述的组件,然后向下面这样调用:

　　 　　 　　& lt; wrapper> 　　& lt; span>世界& lt;/span> 　　& lt;/wrapper> 　　 　　

那么最终的渲染结果将会是这样的:

　　 　　 　　& lt; div> 　　你好 　　& lt; span>世界& lt;/span> 　　& lt;/div> 　　 　　

看起来就是发生了很简单的替换,但是如果在包装中出现了多个<代码> & lt; ng-content> 世界& lt;/span>吗?答案是不会的。<代码> & lt; ng-content> & lt; ng-content> 世界& lt;/span>。如果传入的是自定义的组件,这些组件也只会被实例化一次。

　　

<强>进阶用法
　　

　　

当然,如果<代码> & lt; ng-content> & lt; ng-content> 　　 　　 　　& lt; !——Wrapper.Component。html——比; 　　& lt; div> 　　你好 　　& lt; ng-content> & lt;/ng-content> 　　& lt;人力资源/比; 　　& lt; ng-content选择=翱缍取弊４? lt;/ng-content> 　　& lt;/div> 　　 　　

然后像下面这样使用:

　　 　　 　　& lt; wrapper> 　　& lt; span>世界& lt;/span> 　　2333 　　& lt;/wrapper> 　　 　　

最终的渲染结果将会是这样:

　　 　　 　　& lt; div> 　　你好 　　2333 　　& lt;人力资源/比; 　　& lt; span>世界& lt;/span> 　　& lt;/div> 　　 　　

除了设置<代码> ng-content> 　　 　　 　　& lt; wrapper> 　　& lt; div ngProjectAs=翱缍取北?世界& lt;/div> 　　2333 　　& lt;/wrapper> 　　 　　

这次被传入的模板变成了一个div,但是因为设置了ngProjectAs,所以“世界”会出现在分割线下方。

　　

　　

使用<代码> ng-content 确实可以起到传入模板的效果,但是却有个很致命的问题,就是无法传递数据到传入的模板中。为了将数据传递到传入的模板中,就需要使用到NgTemplateOutlet指令。

　　

<>强基本使用
　　

　　

这个指令可以用来在模板的指定位置实例化一个TemplateRef对象,同时,在实例化的过程中还可以传入一个数据对象。而TemplateRef可以通过ng-template标签来创建,举个例子:

　　 　　 　　@ component ({ 　　选择器:“ng-template-outlet-example”, 　　模板: 　　& lt; ng-container * ngTemplateOutlet=泵?背景:myContext”祝辞& lt;/ng-container> 　　 　　& lt; ng-template #名字let-name="数据"祝辞& lt; span>你好{{名称}}! & lt;/span> & lt;/ng-template> 　　” 　　}) 　　类NgTemplateOutletExample { 　　myContext={数据:‘世界’}; 　　} 　　 　　

<代码> ng-container> let-variableName=肮丶?/代码>。

角向组件传递模板的两种方法