Angular 4 投影-阿里云开发者社区

开发者社区> zting科技> 正文

Angular 4 投影

简介:
+关注继续查看

1.创建工程

ng new demo4

2. 创建子组件

ng g component child

3.子组件html定义

1
2
3
4
5
<div class="wrapper">
  <h2>我是子组件</h2>
  <div>这个div定义在子组件中</div>
  <ng-content></ng-content>    
 </div>

 wrapper样式定义

1
2
3
.wrapper{
  background: lightgreen;
}

  

4. 父组件html定义

1
2
3
4
5
6
7
<div class="wrapper">
  <h2>我是父组件</h2>
  <div>这个div定义在父组件中</div>
  <app-child>
    <div>这个是父组件投影到子组件的</div>
  </app-child>
</div>

  

wrapper样式定义

1
2
3
.wrapper{
  background: cyan;
}

  

5.效果图

 


本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7260380.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HSF/Dubbo序列化时的LocalDateTime, Instant的性能问题
### 来源 在对Dubbo新版本做性能压测时,无意中发现对用例中某个TO(Transfer Object)类的一属性字段稍作修改,由Date变成LocalDateTime,结果是吞吐量由近5w变成了2w,RT由9ms升指90ms。
2404 0
计算机图形学遇上深度学习
今日,TensorFlow 宣布推出 TensorFlow Graphics,该工具结合计算机图形系统和计算机视觉系统,可利用大量无标注数据,解决复杂 3D 视觉任务的数据标注难题,助力自监督训练。
2304 0
独家揭秘:阿里小程序的一云多端!看这篇就够了!
阿里巴巴小程序一云多端的整体战略,以及阿里小程序后续为开发者提供的云服务(云应用、云开发等)、开发者工具链(IDE、插件、SDK等)、跨端框架能力说明。同时结合繁星计划后续提供给开发者的扶持和ISV的权益体系做一个整体的介绍。
27418 0
CDN的HTTPS配置及故障排除
相较于HTTP协议来说,HTTPS协议在网络链路中传输更具有安全可靠性,因为它通过SSL证书在链路中间对我们七层的网络包做了加密,进而防止了一些恶意的内容劫持。针对于这种场景,阿里云CDN也提供了相关的功能,可以支持客户端到CDN L1节点的HTTPS的协议。
1590 0
GDB 调试 Mysql 实战(一)源码编译安装
下载源码 git clone https://github.com/mysql/mysql-server.git cd mysql-server git checkout 5.7 编译安装 安装依赖 yum install -y cmake make gcc gcc-c++ ncurses-dev...
1003 0
PostgreSQL 锁
锁的类型 /* NoLock is not a lock mode, but a flag value meaning "don't get a lock" */ #define NoLock 0 #define AccessS...
1163 0
+关注
3550
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载