angular怎么把组件用在根组件里(详解Angular组件之投影)
类别:编程学习 浏览量:1025
时间:2022-01-25 00:33:50 angular怎么把组件用在根组件里
详解Angular组件之投影目录
- 概述
- 一、简单例子
- 1、子组件中使用<ng-content>指令来标记投影点
- 2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中
- 二、多个<ng-content>投影点
- 三、Angular属性绑定的方式插入html
- 四、对比ngContent指令和属性绑定innerHTML方式
运行时动态改变组件模版的内容。没路由那么复杂,只是一段html,没有业务逻辑。
ngContent指令将父组件模版上的任意片段投影到子组件上。
一、简单例子1、子组件中使用<ng-content>指令来标记投影点
<li class="wrapper"> <h2>我是子组件</h2> <li>这个li定义在子组件中</li> <ng-content></ng-content> </li>
2、父组件中把要投影到子组件的投影点的html片段写到子组件的标签中
<li class="wrapper"> <h2>我是父组件</h2> <li>这个li定义在父组件中</li> <app-child2> <li>这个li是父组件投影到子组件中</li> </app-child2> </li>
效果:
子组件加样式:
.wrapper{ background: lightgreen; }
父组件加样式:
.wrapper{ background: cyan; }
子组件:
<li class="wrapper"> <h2>我是子组件</h2> <ng-content selecter=".header"></ng-content> <li>这个li定义在子组件中</li> <ng-content selecter=".footer"></ng-content> </li>
父组件:
<li class="wrapper"> <h2>我是父组件</h2> <li>这个li定义在父组件中</li> <app-child2> <li class="header">这是页头,这个li是父组件投影到子组件中,title是{{title}}</li> <li class="footer">这是页脚,这个li是父组件投影到子组件中</li> </app-child2> </li>
页头和页脚被投影到子组件中,同时title也被投影过去。
父组件模版中投影内容中插值表达式只能绑定父组件中的属性,虽然内容会被投影到子组件中去。
三、Angular属性绑定的方式插入html在父组件模版中加一行:
<li [innerHTML]="liContent"></li>
父组件中加一个liContent属性,内容就是一段html片段。
liContent="<li>属性绑定绑innerHTML</li>";
效果
四、对比ngContent指令和属性绑定innerHTML方式[innerHTML]是浏览器特定的API。
ngContent指令平台无关。可绑定多个投影点。
优先考虑ngContent指令
以上就是详解Angular组件之投影的详细内容,更多关于Angular组件之投影的资料请关注开心学习网其它相关文章!
您可能感兴趣
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- vue react和angular(详解React Angular Vue三大前端技术)
- angular简单介绍(详解Angular依赖注入)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- angular模块的组成(详解Angular结构型指令模块和样式)
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- angular定义一个管道(Angular管道PIPE的介绍与使用方法)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angular教程第九讲(浅谈Angular的12个经典问题)
- angular组件化(详解Angular父子组件通讯)
- angular使用方法(Angular环境搭建及简单体验小结)
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular怎么把组件用在根组件里(详解Angular组件之投影)
- angular引入组件库(详解Angular组件之中间人模式)
- angular路由树(详解Angular路由之子路由)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
- 你知道 七夕 的真正含义吗(你知道七夕的真正含义吗)
- 七夕的寓意(七夕的寓意)
- 苏志燮赵恩静结婚,韩国四大公共财产变三人,这么快就有替补了(苏志燮赵恩静结婚)
- 《内在美》后,一大波新韩剧来袭,李钟硕朴信惠宋慧乔玄彬回归(一大波新韩剧来袭)
- 给孩子选购保温杯,注意这4个步骤,比颜值更重要(给孩子选购保温杯)
热门推荐
- linux如何查看apache日志(限制 Apache日志文件大小的方法)
- mysql中数据类型的学习体会(MySQL 实现lastInfdexOf的功能案例)
- 如何用python画函数图(使用python绘制二元函数图像的实例)
- mysql dateformat(MySQL的DATE_FORMAT函数的使用)
- 选择哪个平台注册虚拟主机好(怎么选择好的便宜云虚拟主机?分享挑选便宜云虚拟主机的小技巧)
- mysql中常用的三种存储引擎的区别(MySQL 存储过程的优缺点分析)
- 云主机的作用和功能(云主机具备的特性有哪些?)
- apache实时框架(教你快速开启Apache SkyWalking的自监控)
- css清除浮动
- 云服务器有必要买吗(云服务器好用吗?云服务器值得买吗?)