详解Angular组件之投影
更新时间：2021年05月24日 09:33:32 作者：starof
在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。
概述
运行时动态改变组件模版的内容。没路由那么复杂，只是一段html，没有业务逻辑。
ngContent指令将父组件模版上的任意片段投影到子组件上。
一、简单例子
1、子组件中使用<ng-content>指令来标记投影点
<div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content> </div>
2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中
<div class="wrapper">
<h2>我是父组件</h2>
<div>这个div定义在父组件中</div>
<app-child2>
<div>这个div是父组件投影到子组件中</div>
</app-child2>
</div>
效果：
子组件加样式：
.wrapper{
background: lightgreen;
}
父组件加样式：
.wrapper{
background: cyan;
}
二、多个<ng-content>投影点
子组件：
<div class="wrapper"> <h2>我是子组件</h2> <ng-content selecter=".header"></ng-content> <div>这个div定义在子组件中</div> <ng-content selecter=".footer"></ng-content> </div>
父组件：
<div class="wrapper">
<h2>我是父组件</h2>
<div>这个div定义在父组件中</div>
<app-child2>
<div class="header">这是页头，这个div是父组件投影到子组件中,title是{{title}}</div>
<div class="footer">这是页脚，这个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组件之投影的资料请关注脚本之家其它相关文章！
相关文章
angular6.0开发教程之如何安装angular6.0框架
这篇文章主要介绍了angular6.0开发教程之如何安装angular6.0框架，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了AngularJS API之equal比较对象的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要给大家介绍了关于Angular 2父子组件之间共享服务通信的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要给大家介绍了关于Angular.js指令学习中一些重要属性的用法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
简介可以自动完成UI的AngularJS工具angular-smarty
这篇文章主要介绍了简介可以自动完成UI的AngularJS工具angular-smarty,包括其中隔离作用域绑定指令符和promise的使用,需要的朋友可以参考下2015-06-06
这篇文章主要给大家介绍了关于angular中post请求处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-06-06
这篇文章主要介绍了Angular2学习笔记——详解NgModule模块,现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
详解为Angular.js内置$http服务添加拦截器的方法
所谓拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器，每个拦截器都是实现了某些特定方法的Factory。本文就介绍了为Angular.js内置$http服务添加拦截器的方法。2016-12-12
大家在使用angularjs的时候，很容易忽略AngularJS自带指令的作用域问题，有一些指令会产生独立的自己作用域，造成子级无法与父级作用域双向绑定的问题。下面我们来看看这些问题，有需要的可以参考借鉴。2016-09-09
这篇文章主要介绍了angular2+nodejs实现图片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论