如何在 Angular 中使用 ngTemplateOutlet 与示例

在 Angular 中，我们使用 ngTemplateOutlet 指令将外部模板插入到组件的视图中。这个强大的功能使我们能够重用模板并保持代码干燥。

ngTemplateOutlet 指令将模板引用作为其输入。此模板引用可以是组件模板中声明的局部变量，也可以是对外部模板的引用。

无论哪种情况，ngTemplateOutlet 指令都会将模板呈现到我们的视图中。

我们可以使用 ngTemplateOutlet 指令将各种各样的内容插入到我们的视图中，包括其他组件。

这使其成为构建大型复杂 Angular 应用程序的重要工具。在Angular中，我们将向您展示几个可以用来学习的ngTemplateOutlet示例。

什么是ngTemplateOutlet ，它是如何工作的？

在角度中，ngTemplateOutlet 是一个指令，允许您将模板插入到视图中。此指令用于动态呈现模板。

ngTemplateOutlet 指令采用两个输入参数：第一个是要呈现的模板的名称，第二个是可选的上下文对象。

上下文对象将用于解析模板中的任何变量。

ngTemplateOutlet 指令非常强大，可以以各种方式使用。此指令的一个用例是当您想要根据某些条件呈现不同的模板时。

例如，您可以使用 ngTemplateOutlet 为不同的用户类型呈现不同的登录表单。此指令的另一个用例是当您想要重用组件而不必复制代码时。

如何在 Angular 中使用 ngTemplateoutlet

ngTemplateOutlet 是一个指令，用于插入自定义模板来代替 DOM 中的现有元素。这是一项强大的功能，可用于创建可重用的组件。

要使用 ngTemplateOutlet 指令，首先需要创建自定义模板。可以使用 Angular 模板语法或使用外部模板文件创建此模板。

创建自定义模板后，可以使用 ngTemplateOutlet 指令将其插入到 DOM 中。

让我们看一下ngTemplateOutlet 的例子：

import { Component } from '@angular/core'; 
@Component({  
        selector: 'my-app',
        template: `
<ng-template #estimateTemplate let-lessonsCounter="estimate">
    <div> Approximately {{lessonsCounter}} lessons ...</div>
 </ng-template>
 
<ng-container    *ngTemplateOutlet="estimateTemplate;context:ctx">
 </ng-container>
 `}) 
export class AppComponent {
     totalEstimate = 10;
     ctx = {estimate: this.totalEstimate};
}

在这里，我们又有一个多个视图的示例。

现在，在您的app.component.ts 中

我们创建了一个下拉列表，用于在此处列出列表视图卡片中的项目;使用 *ngTemplateOutlet 指令，我们可以在页面上显示我们的内容。