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

拼搏现实的明天。 2023-06-22 04:25 34阅读 0赞

# 一、ng-content #

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

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

父组件：**home.component.html**

子组件：**child.component.html**

效果：

![20191213222309802.png][]

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

select 有三种选择规则：

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

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

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

**home.component.html**

**child.component.html**

![20191213224948181.png][]

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

**home.component.html**

**child.component.html **

![20191213234036368.png][]

# 二、ng-container #

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

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

![20191214000822185.png][]![20191214000840574.png][]

# 三、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>

![20191213234559362.png][]

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

[https://blog.csdn.net/lyqhn2012/article/details/96424497][https_blog.csdn.net_lyqhn2012_article_details_96424497]

[20191213222309802.png]: https://img-blog.csdnimg.cn/20191213222309802.png
[20191213224948181.png]: https://img-blog.csdnimg.cn/20191213224948181.png
[20191213234036368.png]: https://img-blog.csdnimg.cn/20191213234036368.png
[20191214000822185.png]: https://img-blog.csdnimg.cn/20191214000822185.png
[20191214000840574.png]: https://img-blog.csdnimg.cn/20191214000840574.png
[20191213234559362.png]: https://img-blog.csdnimg.cn/20191213234559362.png
[https_blog.csdn.net_lyqhn2012_article_details_96424497]: https://blog.csdn.net/lyqhn2012/article/details/96424497