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的内容

控制ng-template是否显示和隐藏

    ng-template中的内容显示和隐藏，通过结构性指令*ngif来控制，当ngif为false,这显示

三、ng-container

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

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

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

    
        

            {
    {item}}
        
    


渲染结果：2、4、6