NG 内容与NG模板

Question

ng-content和ng-template有什么区别，它们各自的用例是什么？

Answer 1

ng-content

用于在组件中的特定位置投影内容。

例：

<!-- custom.component.html -->
<h1>
<ng-content></ng-content>
</h1>

<!-- app.component.html -->
<app-custom>test</app-custom>

上面的代码将生成以下 html：

<app-custom>
<h1>
test
</h1>
</app-custom>

ng-template是描述模板的块，除非显式引用或使用，否则不会呈现模板。

以下代码不输出任何 HTML：

<ng-template>
<div>Hello</div>
</ng-template>

但是这个将显示div：

<ng-container *ngIf="false; else myTemplate"></ng-container>
<ng-template #myTemplate>
<div>Hello</div>
</ng-template>

两者都永远不会在HTML代码中可见，它们仅由Angular使用。

<小时 />

奖金：

ng-container是另一个与结构指令(ngFor，ngIf)一起使用的Angular元素，但它也不会产生HTML。

Answer 2

1. <ng-template>

顾名思义，<ng-template>是Angular与结构指令(*ngIf，*ngFor，[ngSwitch]和自定义指令)一起使用的模板元素。

这些模板元素仅在存在结构指令的情况下工作。Angular 将主机元素(应用指令)包装在<ng-template>中，并通过将其替换为诊断注释来消耗完成的 DOM 中的<ng-template>。

2. <ng-content>

它们用于创建可配置的组件。这意味着可以根据用户的需求配置组件。这就是众所周知的内容投影。已发布库中使用的组件利用<ng-content>使其自身可配置。