其他分享
首页 > 其他分享> > 如何在 Angular 中使用 ngTemplateOutlet 与示例

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

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