<p>
child works!
</p>
<ng-content></ng-content>
<app-child>
父组件投影
</app-child>
<p>
child works!
</p>
<ng-content select=".header"></ng-content> <ng-content select=".footer"></ng-content>
<app-child>
<div class="header">页头</div>
<div class="footer">页脚</div>
</app-child>
<div [innerHTML]='div1'></div>
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
div1 = '<div>aaa</div>';
}

angular ng-content的更多相关文章

  1. [Angular] Configurable Angular Components - Content Projection and Input Templates

    We are going to have a modal component: <au-modal > </au-modal> And we can pass default ...

  2. angular ng build --prod 打包报错解决方案

    使用以下代码  就不报错了 ng build --prod --no-extract-license    打包命令 使用以下代码  就不报错了 ng build --prod --no-extrac ...

  3. angular ng指令

    1.指令 ng-app,ng- 都是angular的指令系统ng-app: ng-app是angular的初始化,一个页面只能有一个ng-app,位置不限制.在页面上加入了这个执行,那么从当前的元素以 ...

  4. [Angular] Learn Angular Multi-Slot Content Projection

    Now for au-modal component, we pass in tow component though contenct projection: <au-modal class= ...

  5. Docker+Nginx部署Angular

    在部署Angular生产环境之前,需要电脑已经安装docker. 添加Dockerfile在已经完成的Angular项目的项目根目录下添加Dockerfile文件. Dockerfile文件内容: F ...

  6. VS Code直接调试Angular代码

    安装VS Code扩展 安装Debugger for Chrome 安装Debugger for Firefox 配置Launch.json文件 Launch.json文件的创建和生成我们可以利用VS ...

  7. ng-template、ng-content、ng-container

    https://www.jianshu.com/p/0f5332f2bbf8 ng-template.ng-content.ng-container三者应该是自定义组件需要经常用到的指令.今天咱们就来 ...

  8. Jquery使用ajax以及angularjs 动态模板加载并进行渲染

    1. 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  9. 在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

  10. .Net Core应用框架Util介绍(一)

    距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆. 回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经 ...

随机推荐

  1. Laravel5 cookie和session设置 Cookie::queue()自动添加

    Cookies Laravel会加密所有已创建的cookie信息,并附加上授权码,当客户端擅自修改cookie信息时,该cookie将被废弃,从而保证安全性. 获取一个指定的cookie值 $valu ...

  2. thinkphp中配置信息的二维数组设置与使用

    有时候配置信息是二维数组 1.配置 <?php return array ( // 阿里大鱼短信配置 'dayu_appkey'=>'xxx', 'dayu_secretKey'=> ...

  3. 四、 kafka consumer 配置

    consumer配置 #指明当前消费进程所属的消费组,一个partition只能被同一个消费组的一个消费者消费(同一个组的consumer不会重复消费同一个消息) group.id #针对一个part ...

  4. MFC调试的几个技巧

    TCHAR pStr[] = _T("this is a test!"); void* p = (void*)pStr; TRACE(_T("pStr is %s\n&q ...

  5. python's thirty day for me 异常处理

    ---恢复内容开始--- 程序的异常:报错之后程序终止. 异常处理搭配使用: l = ['创建老师','创建学校'] while True: try: for num,item in enumerat ...

  6. 「小程序JAVA实战」小程序视图之细说数据绑定(13)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-13/ 在前面的小节里面其实对数据绑定都有所了解了,在这次给老铁在好好说下数据绑定,看下它的方方面面 ...

  7. IDE 文件查找快捷键被占

    快捷键 Ctrl+Shift+F 被搜狗输入法抢占了. 打开搜狗输入法里的快捷键设置,去掉,my ide is ok!

  8. 【转】VS 安全开发生命周期(SDL)检查

    前面在学习使用google的protobuf时在VS2012中一直无法编译编译通过,经过查找一些资料原来发现,并不是protobuf的问题,而是自己在使用VS2012时,没有完全了解VS2012的强大 ...

  9. Hadoop Serialization -- hadoop序列化详解 (2)

    回顾: 回顾序列化,其实原书的结构很清晰,我截图给出书中的章节结构: 序列化最主要的,最底层的是实现writable接口,wiritable规定读和写的游戏规则 (void write(DataOut ...

  10. Hadoop编码解码【压缩解压缩】机制详解(1)

    想想一下,当你需要处理500TB的数据的时候,你最先要做的是存储下来.你是选择源文件存储呢?还是处理压缩再存储?很显然,压缩编码处理是必须的.一段刚刚捕获的60分钟原始视屏可能达到2G,经过压缩处理可 ...