详解Angular组件之投影

在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。

概述

运行时动态改变组件模版的内容。没路由那么复杂，只是一段html，没有业务逻辑。

ngContent指令将父组件模版上的任意片段投影到子组件上。

一、简单例子 1、子组件中使用<ng-content>指令来标记投影点

<div> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content> </div>

2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中

<div> <h2>我是父组件</h2> <div>这个div定义在父组件中</div> <app-child2> <div>这个div是父组件投影到子组件中</div> </app-child2> </div>

效果：

子组件加样式：

.wrapper{ background: lightgreen; }

父组件加样式：

.wrapper{ background: cyan; }

二、多个<ng-content>投影点

子组件：

<div> <h2>我是子组件</h2> <ng-content selecter=".header"></ng-content> <div>这个div定义在子组件中</div> <ng-content selecter=".footer"></ng-content> </div>

父组件：

<div> <h2>我是父组件</h2> <div>这个div定义在父组件中</div> <app-child2> <div>这是页头，这个div是父组件投影到子组件中,title是{{title}}</div> <div>这是页脚，这个div是父组件投影到子组件中</div> </app-child2> </div>

页头和页脚被投影到子组件中，同时title也被投影过去。

父组件模版中投影内容中插值表达式只能绑定父组件中的属性，虽然内容会被投影到子组件中去。

三、Angular属性绑定的方式插入html

在父组件模版中加一行：

<div [innerHTML]="divContent"></div>

父组件中加一个divContent属性，内容就是一段html片段。

divContent="<div>属性绑定绑innerHTML</div>";

效果

四、对比ngContent指令和属性绑定innerHTML方式

[innerHTML]是浏览器特定的API。

ngContent指令平台无关。可绑定多个投影点。

优先考虑ngContent指令

以上就是详解Angular组件之投影的详细内容，更多关于Angular组件之投影的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章: