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

秒速五厘米 2022-02-01 06:04 281阅读 0赞

#### 一、ng-content ####

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

使用方法：[https://blog.csdn.net/yw00yw/article/details/90175624][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

[https_blog.csdn.net_yw00yw_article_details_90175624]: https://blog.csdn.net/yw00yw/article/details/90175624