运行时动态改变组件模版的内容。没路由那么复杂,只是一段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;
}

2、多个<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也被投影过去。

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

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

在父组件模版中加一行:

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

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

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

效果

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

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

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

优先考虑ngContent指令。

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/8743223.html  有问题欢迎与我讨论,共同进步。

Angular组件——投影的更多相关文章

  1. Angular组件——组件生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意 ...

  2. 手把手教你搭建自己的Angular组件库 - DevUI

    摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...

  3. Angular组件——父子组件通讯

    Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...

  4. angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  5. chart.js angular组件封装(ng6)、实战配置、插件编写

    前言 项目需要使用chart.js插件,由于项目是使用angular开发,那么我第一步就是先把chart.js改造成angular组件来使用. 本项目代码都可以在github上下载:项目git地址 a ...

  6. [转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库

    使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一. 项目目标 现在,我们一起创建一个简单的组件库. 首先,我们需要创建一个 header 组件.这没什么特别的,当然接下来 ...

  7. Angular 4 投影

    1.创建工程 ng new demo4 2. 创建子组件 ng g component child 3.子组件html定义 <div class="wrapper"> ...

  8. Angular组件之间通讯

    组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...

  9. angular -——组件样式修改不成功

    angular组件样式修改不成功! 自己定义的css可以成功 组件的不行 style在模板字符串里 直接没有 class 是显示的 但是样式不生效 加上面 即可,为什么?我也不太清楚.有知道答案的请回 ...

随机推荐

  1. hdu-5786(补图最短路)

    题意:给你n个点,m条无向边,问你这n个点构成的完全图,不用那m条边,由一个s出现的单源最短路 解题思路:首先,暴力建图不行,点太多,那么我们就按照它的规则来,把m条边建好,但是建的这个图表示不走的方 ...

  2. [ffmpeg] 音频样本

    不仅限于ffmpeg,音频采样所得的PCM都含有三个要素:声道(channel).采样率(sample rate).样本格式(sample format). 声道 当人听到声音时,能对声源进行定位,那 ...

  3. neutron-删除负载均衡器

    neutron-删除负载均衡器 在清除垃圾数据的时候,删除负载均衡器,总是有很多依赖.写了一个脚本,连同依赖资源一起删除 #!/bin/bash delete(){ local id id=$1 lo ...

  4. <数据结构基础学习>(四)链表 Part 2

    一.使用链表实现栈 增,删,查只对链表头进行操作,时间复杂度都为O(1) 链表头作为栈顶 LinkedListStack<E> implements Stack<E> publ ...

  5. Java基础 -- 访问控制权限

    一  包:库单元 假设我们存在两个类名相同的类,如果没有一定的措施对其进行区分,就会无法区别到底使用的是哪一个类.因此java引入了包来进行名字空间管理. 包(类库)包含有一组类,这些类在单一的名字空 ...

  6. Dynamics CRM 日常使用JS整理(一)

    整理下平时CRM开发中用到的一些基本的js操作 取值: var oResult = Xrm.Page.getAttribute(sFieldName).getValue(); var oResult ...

  7. [再寄小读者之数学篇](2014-06-26 Besov space estimates)

    (1) $$\bex \sen{D^k f}_{\dot B^s_{p,q}}\sim \sen{f}_{\dot B^{s+k}_{p,q}}. \eex$$ (2) $$\beex \bea &a ...

  8. [物理学与PDEs]第5章习题1 矩阵的极分解

    证明引理 2. 1. 证明: (1)  先证明存在正交阵 ${\bf P},{\bf Q}$ 及对角阵 ${\bf D}$ 使得 $$\bex {\bf F}={\bf P}{\bf D}{\bf Q ...

  9. Linux性能工具图册-便于查阅

    该图表示了,Linux系统哪种问题用哪种工具

  10. 原生js写轮播图效果

    <script> var picarr=[ "pic/lb1.jpg", "pic/lb2.jpg", "pic/lb3.jpg" ...