在 Angular 中，ng-template 和 ng-container 是两个非常有用的指令，可以帮助我们优化性能。本文将详细介绍这两个指令的作用和用法，并提供示例代码，帮助读者更好地理解和应用它们。
ng-template
ng-template 是一个 Angular 模板指令，用于定义一个可重用的模板。它不会在页面中渲染任何内容，只有在被调用时才会生效。
基本用法
下面是一个简单的例子，展示了如何使用 ng-template 定义一个模板：
<ng-template #myTemplate> <p>Hello, World!</p> </ng-template>
这里我们定义了一个名为 myTemplate 的模板，它包含一个 p 元素，显示文本 "Hello, World!"。注意，这个模板不会在页面中渲染任何内容。
在组件中使用
定义了模板之后，我们可以在组件中使用它。使用 ng-container 指令可以让我们在不添加任何多余标签的情况下使用模板。下面是一个例子：
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>
这里我们使用了 ng-container 指令，并将它的 *ngTemplateOutlet 属性设置为 myTemplate，这样就可以在页面中渲染出 "Hello, World!"。
传递参数
有时候我们需要在模板中传递参数，这时可以使用 ngTemplateOutletContext 属性。下面是一个例子：
<ng-template #myTemplate let-name="name">
<p>Hello, {{ name }}!</p>
</ng-template>
<ng-container *ngTemplateOutlet="myTemplate; context: { name: 'Angular' }"></ng-container>这里我们在模板中定义了一个名为 name 的参数，并在 ng-container 中使用 context 属性传递了一个值为 "Angular" 的参数。这样就可以在页面中渲染出 "Hello, Angular!"。
性能优化
ng-template 还可以用于性能优化，例如在使用 ngIf 指令时。如果我们有一个条件判断，只有在满足条件时才需要渲染一些内容，那么可以将这些内容放在一个 ng-template 中，这样只有在条件满足时才会渲染这些内容，从而提高性能。下面是一个例子：
<div *ngIf="show"> <p>Hello, World!</p> </div>
这里我们使用了 ngIf 指令，在条件满足时渲染了一个 p 元素。如果 show 的值经常变化，那么每次变化时都需要重新渲染这个元素，从而影响性能。可以将 p 元素放在一个 ng-template 中，这样只有在条件满足时才会渲染它：
<ng-template #myTemplate> <p>Hello, World!</p> </ng-template> <ng-container *ngIf="show; then myTemplate"></ng-container>
这里我们使用了 ng-container 指令，并将它的 *ngIf 属性设置为 show，将 myTemplate 作为条件满足时渲染的内容。这样只有在条件满足时才会渲染 p 元素，从而提高性能。
ng-container
ng-container 是一个 Angular 容器指令，用于在不添加任何多余标签的情况下组合多个元素。
基本用法
下面是一个简单的例子，展示了如何使用 ng-container 组合多个元素：
<ng-container> <p>Hello, World!</p> <span>Angular</span> </ng-container>
这里我们使用 ng-container 组合了一个 p 元素和一个 span 元素，它们会被作为一个整体渲染在页面中。
在 ngIf 中使用
ng-container 还可以用于在 ngIf 中组合多个元素。下面是一个例子：
<div *ngIf="show"> <p>Hello, World!</p> <span>Angular</span> </div>
这里我们使用了 ngIf 指令，在条件满足时渲染了一个 p 元素和一个 span 元素。如果这些元素需要被包含在一个容器中，可以使用 ng-container：
<div *ngIf="show">
<ng-container>
<p>Hello, World!</p>
<span>Angular</span>
</ng-container>
</div>这里我们使用了 ng-container 指令，将 p 元素和 span 元素包含在一个容器中，这样它们会被作为一个整体渲染在页面中。
性能优化
ng-container 还可以用于性能优化，例如在使用 ngFor 指令时。如果我们有一个数据列表需要遍历，那么可以将 ng-container 放在每个元素的外面，这样只需要渲染一次 ng-container，而不是渲染多个元素，从而提高性能。下面是一个例子：
<ng-container *ngFor="let item of items">
<div>{{ item }}</div>
</ng-container>这里我们使用了 ng-container 指令，并将它放在每个元素的外面。这样只需要渲染一次 ng-container，而不是渲染多个 div 元素，从而提高性能。
总结
ng-template 和 ng-container 是两个非常有用的指令，可以帮助我们优化性能。ng-template 可以定义可重用的模板，并用于性能优化，例如在使用 ngIf 指令时。ng-container 可以在不添加任何多余标签的情况下组合多个元素，并用于性能优化，例如在使用 ngFor 指令时。希望本文对读者有所帮助，能够更好地理解和应用 ng-template 和 ng-container。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661a0542d10417a222ac548b