work hard work smart

专注于Java后端开发。 不断总结,举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Angular 4 投影

Posted on 2017-08-10 17:02  work hard work smart  阅读(201)  评论(0编辑  收藏  举报

1.创建工程

ng new demo4

2. 创建子组件

ng g component child

3.子组件html定义

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

 wrapper样式定义

.wrapper{
  background: lightgreen;
}

  

4. 父组件html定义

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

  

wrapper样式定义

.wrapper{
  background: cyan;
}

  

5.效果图