素材巴巴 > 程序开发 >

angular2 组件内容嵌入(ng-content)

程序开发 2023-09-08 10:41:58

 一、简介

 内容嵌入是组件的一个高级功能特性,使用组件的内容嵌入特性能很好地扩充组件的功能,方便代码的复用。

二、用法

如上,在模版中使用了标签,这个标签就是用来渲染组件嵌入内容的。在中有个select="header",用于匹配内容,并填充到ng-content中。

下面是一个简单的根组件来使用它:

最后组件的DOM树会被Angular渲染成:

注意到在标签之间的内容,也就是

Header content
,被填充到ng-content,而NgContentExampleComponent组件模版中的其他元素没有受到影响。那么嵌入的内容是如何匹配显示的呢?上文提及到了select="header",select属性是一个选择器,与CSS选择器作用是类似的,它表示匹配标签之间的第一个header标签,并将其填充到相应的ng-content中。
另外,还可以同时使用多个嵌入内容。下面修改NgContentExampleComponent组件的代码,通过标签选择器、类选择器、属性选择器来指定多个ng-content,示例代码如下:

然后修改NgContentAppComponent组件中的代码来使用多个嵌入内容,示例代码如下:

 

转载于:https://www.cnblogs.com/1156063074hp/p/10996341.html


标签:

上一篇: Kotlin 很受 Java 开发人员的欢迎 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。