标签：Angular longtext 代码 模板 指令 参数 示例

在 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 指令，我们可以在页面上显示我们的内容。

标签：Angular,longtext,代码,模板,指令,参数,示例
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。