ng-content、ng-container、ng-template使用区别

一、ng-content

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

以<app-child>这个子组件为例。

父组件：home.component.html

<div style="background: darkgoldenrod;">父组件
    <app-child>
        <div>映射内容</div>
    </app-child>
</div>

子组件：child.component.html

<div style="background: darkorchid;margin: 10px;">
    子组件
    <ng-content></ng-content>
</div>

效果：

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

select 有三种选择规则：

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

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

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

home.component.html

<div style="background: darkgoldenrod;">父组件
    <app-child>
        <div class="div1">映射内容1</div>
        <div class="div2">映射内容2</div>
    </app-child>
</div>

 

child.component.html

<div style="background: darkorchid;margin: 10px;">
    子组件<br />
    div1:<ng-content select=".div1"></ng-content>
    div2:<ng-content select=".div2"></ng-content>
</div>

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

home.component.html

<div style="background: darkgoldenrod;">父组件
    <app-child>
        <ng-container ngProjectAs="aaa">
            <div class="div1">映射内容1</div>
            <span>映射内容2</span>
        </ng-container>
    </app-child>
</div>

child.component.html 

<div style="background: darkorchid;margin: 10px;">
    子组件<br />
    aaa:<ng-content select="aaa"></ng-content>
</div>

二、ng-container

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

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

<div style="background: darkgoldenrod;">父组件
    <ng-container *ngFor="let item of items">
        <li>{{item}}</li>
    </ng-container>
</div>

三、ng-template

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

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

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

<ng-template #login>
    <button>login</button><br />
</ng-template>
<ng-template #logout>
    <button>logout</button>
</ng-template>
<ng-template #logout2>
    <button>logout2</button>
</ng-template>
<ng-container *ngTemplateOutlet="login">
</ng-container>
<ng-container *ngTemplateOutlet="logout">
</ng-container>

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