angular7——ng-template、ng-content、ng-container

一、ng-content

ng-content是内容映射指令(也叫内容嵌入)，相当于vue中的slot内容分发，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，很好地扩充组件的功能，方便代码的复用。

使用方法：https://blog.csdn.net/yw00yw/article/details/90175624

ng-content相当于一个占位符(留了个位置)，类似于路由出口router-outlet一样。之后会把相应的内容放到这个位置上来。

二、ng-template

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

1. 借助其他结构型指令如×ngIf，来显示ng-template的内容

<div *ngIf="arr.length > 0 else xxxx">控制ng-template是否显示和隐藏</div>
<ng-template #xxxx>
    ng-template中的内容显示和隐藏，通过结构性指令*ngif来控制，当ngif为false,这显示
</ng-template>

三、ng-container

ng-container既不是一个Component组件，也不是一个Directive指令，只是单纯的一个特殊tag标签。ng-container可以直接包裹任何元素，包括文本，但本身不会生成元素标签，也不会影响页面样式和布局。包裹的内容，如果不通过其他指令控制，会直接渲染到页面中。

可以把ng-container简单理解为一个逻辑容器。用来做一些逻辑处理的。减少不必要的html标签。

ng-container有一个用处就是配合ngFor和ngIf使用。我们知道ngFor和ngIf不能同时处在同一个元素上。

<ul>
    <ng-container *ngFor="let item of arr">
        <li *ngIf="item % 2 === 0">
            {{item}}
        </li>
    </ng-container>
</ul>

渲染结果：2、4、6