一、ng-content

是内容映射，所谓内容映射，是指在组件内嵌入模版代码，方便定制可复用的组件。

以这个子组件为例。

父组件：home.component.html

父组件
映射内容
 

子组件：child.component.html

子组件
 

效果：

如果要使用多个标签怎么识别映射到哪个标签呢？可以通过的 select 属性，可以选择投影的内容(组件或者html里面的标签)，如果我们没有设置select属性则所有的内容会投影上去。

select 有三种选择规则：

select="***"：只会映射父组件里的 *** 标签或者组件内容

select=".***"：只会映射父组件里class是 *** 的标签或者组件内容

select="[key=value]"：选择设置了属性key="value“的html标签或者组件，注意：select的值不能设置为动态的

home.component.html

父组件
映射内容1
映射内容2
 

child.component.html

子组件
div1:div2:
 

select 还有一种用法，ngProjectAs 起别名，然后子组件引用

home.component.html

父组件
映射内容1
映射内容2
 

child.component.html 

子组件
aaa:
 

二、ng-container

是Angular定义的一个特殊的标签。可以把它理解为一个容器，可以直接包裹任何元素，但本身不会生成元素标签，也不会影响页面样式和布局。

ng-container有一个用处就是配合ngFor和ngIf使用。

父组件
{{item}}
 

三、ng-template

ng-template是Angular 结构型指令中的一种，用于定义模板渲染HTML(模板加载)。定义的模板不会直接显示出来，需要通过其他结构型指令（如 ng-if）或 template-ref 将模块内容渲染到页面中。

ng-template 是用来定义模板的。可以用ng-container和templateOutlet指令来进行使用。

可以通过ng-container的templateOutlet指令动态加载ng-template模板。

login

 
 logout
 
 logout2
 
 
 
 
 

还有其它用法下面参照下面

https://blog.csdn.net/lyqhn2012/article/details/96424497