内容对比模板外
ng-content vs. ng-template
ng-content 和 ng-template 之间有什么区别,它们各自有哪些不同的用例?
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。
<ng-template>
顾名思义,<ng-template
> 是 Angular 与结构指令(*ngIf
、*ngFor
、[ngSwitch]
和自定义指令)。
这些模板元素仅在存在结构指令的情况下才有效。 Angular 将主机元素(应用指令的)包装在 <ng-template>
内,并通过用诊断注释替换它来消耗完成的 DOM 中的 <ng-template>
。
<ng-content>
它们用于创建可配置的组件。这意味着可以根据用户的需要配置组件。这就是众所周知的内容投影。已发布的库中使用的组件利用 <ng-content>
使其自身可配置。
ng-content 和 ng-template 之间有什么区别,它们各自有哪些不同的用例?
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。
<ng-template>
顾名思义,<ng-template
> 是 Angular 与结构指令(*ngIf
、*ngFor
、[ngSwitch]
和自定义指令)。
这些模板元素仅在存在结构指令的情况下才有效。 Angular 将主机元素(应用指令的)包装在 <ng-template>
内,并通过用诊断注释替换它来消耗完成的 DOM 中的 <ng-template>
。
<ng-content>
它们用于创建可配置的组件。这意味着可以根据用户的需要配置组件。这就是众所周知的内容投影。已发布的库中使用的组件利用 <ng-content>
使其自身可配置。