ng-content是angular的内置指令，用于在Angular组件中定义插槽，以便将外部内容插入到组件中显示。它的作用类似于HTML中的标签。

个关键词的作用：ng-template是备胎(模板)：通常在html里面作为备用模板，当绑定了对应的#标记的时候才会显示ng-container是舔狗(虚拟标签)：包裹的内容显示，而自身标签不会出现在html中ng-content

子组件通过投影方式嵌入父级组件，通过ng-content形式。在这两种情况下，如果我们需要访问子组件的公开属性或方法，就需要使用@ViewChild与@ContentChild装饰器了。

投影ng-content修改映射组件样式@Component({selector:'',template:`//放入投影组件`})exportclassProjection{//获取投影进来的组件,@ContentChildren

本文会包含作者一些理解，为了不和原作者意思混淆，会将个人的理解放在【】里。原文地址那是我忙于为我的办公项目创作新功能的日子之一。突然间，某些事情引起了我的注意。上图是angular最终渲染出来的DOM当我审查DOM时候，我看到这个ngcontent被Angular应用到了元素上。如果他们包含元素在最终的DOM里，那么是用来干什么的？那是我很困惑在和中。在探寻问题答案的时候我发现了和*ngTempl

app-content-section的Component，用于容纳内容投影(contentprojection)：这个Component的模板区域，分别定义了三个div区域，里面包含了对应的内容投影占位符ng-content

app-persons-htmlapp-persons-ts使用效果图多个条件内容投影appChildRef调整app-persons-htmlapp-persons-ts使用效果图总结单内容投影利用ng-content

Angular中ng-template、ng-container、ng-content的用法1、ng-container此标签不渲染成DOM；默认显示标签内部内容，也可以使用结构型指令（ngIf、ngFor

您需要了解有关Angular中的ng-template，ng-content，ng-container和*ngTemplateOutlet的所有信息普拉泰克·米什拉（PrateekMishra）那是我忙于为

Angular2+中的的内容映射使用的是ng-content指令，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件。

指令：ng-content方法：在html中，父组件中引用子组件标签的写入要显示的内容，子组件使用确定投影点。

ItwasoneofthosedayswhenIwasbusyworkingonnewfeaturesformyofficeproject.Allasudden,somethingcaughtmyattention:那是我忙于为Office项目开发新功能的日子之一。突然间，一些事情引起了我的注意：WhileinspectingtheDOMIsawthengcontentbeingappliedon

问题分析：如果是使用标签实例化，直接使用ng-content就可以投影对应的内容进去了，例如：这里的将会投影进alertComponent对应的可是动态生成要怎

在中有个select="header",用于匹配内容，并填充到ng-content中。下面是一个简单的根组件来使用它：app.ts最后组件的DOM树会被Angular渲染成：app.html注意到在标

大纲1、认识内容投射2、一个简单组件3、简单投射4、针对性投射5、ngProjectAs6、代码资源认识内容投射在angular中，组件属于特殊的指令，它的特殊之处在于它有自己的模板（html）和样式（css）。因此使用组件可以使我们的代码具有强解耦、可复用、易扩展等特性。一个简单组件/*demo.component.ts*/import{Component,OnInit}from‘@angula

主要内容：ng-contentng-template*ngTemplateOutletng-container1，2原文链接Angular2Tips&Tricks3,4原文链接Angularng-template,ng-containerandngTemplateOutlet-TheCompleteGuideToAngularTemplates1.ContentProjection(内容投影)Co

在angular中，提供了ng-content来更方便的编写组件和布局。

better-scroll的使用  由于需要在一个固定的的高度做无限滚动，本来css的overflow-y也可以完成的，奈何安卓不是很流畅，还很生硬，就是用了第三方库better-scroll，配合angular的ng-content

ng-content：父组件调用子组件时，将父组件内容投射到子组件指定位置（子组件中ng-cont

父组件：HTML。app-test-demo为子组件选择器，title为父组件的属性我是父组件header,{{title}}我是父组件footer子组件：HTML中间

以前举の例子，父组件包含子组件都是直接指明子组件的selector，比如子组件的selector叫app-child，那么嵌入父组件时直接指明即可:这是很硬性的编码，而ng-content就是用来替代这种硬性编码的

回忆下，我们在用jq操作一个异步操作，获取内容后填充或者改变某个区域，实现局部刷新，这个也差不多的功能定义，在消费的时候用内容填充或者叫替换有ng-content标注的地方，重点是“替换”,而@ViewChild

如果你尝试在Angular中编写可重复使用的组件，则可能会接触到内容投射的概念。然后你发现了，并找到了一些关于它的文章，进而实现了所需的功能。接下来我们来通过一个简单的示例，一步步介绍所涉及的内容。Simpleexample在本文中我们使用一个示例，来演示不同的方式实现内容投影。由于许多问题与Angular中的组件生命周期相关，因此我们的主要组件将显示一个计数器，用于展示它已被实例化的次数：imp

ng-templateng-template是angular提供的用来定义模板的标签,什么时候需要使用ng-template?,不着急，我们一步一步来，首先接着第二篇的father.component.ts，import{Component,OnInit,ContentChild,TemplateRef,AfterViewInit,AfterContentInit,ViewChild,Input}

@contentChild上一篇，我们讲了ng-content的用法，angular提供了contentChild来获取ng-content里面的内容，@ContentChild装饰器(selector

ng-content是angular提供的一个指令，当我们想封装一个组件，并且希望组件展示的内容可以由用户自定义的时候，ng-content便要上场了。

ng-content1.ng-zorro-ant的官网https://ng.ant.design/version/0.7.x/components/breadcrumb/zh1.ng-content这部分大家可以搜索一下ng-content

一、ng-contentng-content是内容映射指令(也叫内容嵌入)，相当于vue中的slot内容分发，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，很好地扩充组件的功能，方便代码的复用。使用方法：https://blog.csdn.net/yw00yw/article/details/90175624ng-content相当于一个占位符(留了个位置)，类似于路由出口router

子组件通过投影方式嵌入父级组件，通过ng-content形式。在这两种情况下，如果我们需要访问子组件的公开属性或方法，就需要使用@ViewChild与@ContentChild装饰器了。

ng-template、ng-content、ng-container三者应该是自定义组件需要经常用到的指令。

2、设置头部和内容模板此处使用ng-template或者ng-content。使用了前者。

1为什么要用transclusion(嵌入包含)不要被术语嵌入包含所迷惑，下面用一个简单的例子将它说明清楚。现有一个卡片组件(cardcomponent)，它由header、body和footer三个部分组成。该卡片的布局(3个部分)和颜色(header和footer的背景色为灰色)是固定的；header和footer只允许文本内容；body中可以是任何形式的内容。比如，我们可以这样使用该组件：或

在Angular中，组件属于特殊的指令，它的特殊之处在于它有自己的模板（html）和样式（css）。因此使用组件可以使我们的代码具有强解耦、可复用、易扩展等特性。通常的组件定义如下：demo.component.ts：import{Component,OnInit}from'@angular/core';@Component({selector:'demo-component',templateU

在Angular中，组件属于特殊的指令，它的特殊之处在于它有自己的模板（html）和样式（css）。因此使用组件可以使我们的代码具有强解耦、可复用、易扩展等特性。通常的组件定义如下：demo.component.ts：import{Component,OnInit}from'@angular/core';@Component({selector:'demo-component',templateU

better-scroll的使用由于需要在一个固定的的高度做无限滚动，本来css的overflow-y也可以完成的，奈何安卓不是很流畅，还很生硬，就是用了第三方库better-scroll，配合angular的ng-content

参考博客:https://segmentfault.com/a/1190000008707828我们在写HTML时经常使用到标签嵌套,比如:嵌套在angular自定义标签里面能否实现标签的嵌套呢?答案是肯定的./*parent.component.ts*/import{Component}from'@angular/core';@Component({selector:'exe-greet',te

参考博客:https://segmentfault.com/a/1190000008707828我们在写HTML时经常使用到标签嵌套,比如:嵌套在angular自定义标签里面能否实现标签的嵌套呢?答案是肯定的./*parent.component.ts*/import{Component}from'@angular/core';@Component({selector:'exe-greet',te

1.使用ng-content来做内容填充有的时候，我们可能希望在一个组件里面动态的嵌入其他组件，我们除了使用*ngIf来动态地显示或隐藏其他组件，还可以使用ng-content来做。

在6.3节中使用ng-content投影过去的复杂组件，我们需要使用代码操作它该怎么做呢？

angular2+中的的内容映射使用的是ng-content指令，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件。

在angular中，提供了ng-content来更方便的编写组件和布ng-content在组件中嵌入内容在组件中嵌入模板代码select属性支持css选择器（”#id”,”.class”等等）使用下面以表单中常见的布局为例

在前面的问题汇总的第四个里，介绍过angular2的组件投影，也就是我们在使用组件的时候，父组件可以用属性把一些数据传到子组件内部，但是一写DOM结构我们没法再通过参数传值，这时候我们用到了ng-content

ng-content指令可以在组件中嵌入模板代码，方便定制可复用的组件。比如：页面的header是个通用组件，导航菜单样式已经设定好，只需在header标签内加上菜单内容。

阅读Angular6/RxJS最新教程，请访问前端修仙之路如果你尝试在Angular中编写可重复使用的组件，则可能会接触到内容投射的概念。然后你发现了，并找到了一些关于它的文章，进而实现了所需的功能。接下来我们来通过一个简单的示例，一步步介绍所涉及的内容。Simpleexample在本文中我们使用一个示例，来演示不同的方式实现内容投影。由于许多问题与Angular中的组件生命周期相关，因此我们的主

ng-content指令可以在组件中嵌入模板代码，方便定制可复用的组件。比如：页面的header是个通用组件，导航菜单样式已经设定好，只需在header标签内加上菜单内容。