时间戳

首页 > 解决方案 > 将 ng-template 放在 *ngFor 中会影响性能吗？

angular - 将 ng-template 放在 *ngFor 中会影响性能吗？

问题描述

让我们假设以下 ItemComponent 被创建了很多次：

<li *ngFor="let item of items">
    <app-item [data]="item"></app-item>
</li>

并包含单击时显示一些复杂模式对话框的按钮。

当我将对话框的一些 ng 模板放置在 ItemComponent 内部或 *ngFor 外部时，它是否会影响应用程序的性能（例如启动时间或内存占用）？

我的意思是，我知道模板在调用对话框之前不会被实例化，但我不确定模板本身是每个组件创建一次，还是每个实例创建一次？

标签： angularng-bootstrapangular-template

解决方案

当我将对话框的一些 ng 模板放置在 ItemComponent 内部或 *ngFor 外部时，它是否会影响应用程序的性能（例如启动时间或内存占用）？

<ng-template>是将要创建的组件。该组件从它的内部 DOM 元素创建一个模板引用，并且这些 DOM 元素不会在页面上呈现。对于item在ngFor. ngTemplate有一个当前上下文和一个注入的上下文。的值item将在当前上下文中出现，ngFor并且在使用时必须在上下文对象中提供ngTemplateOutlet。

ngTemplate在ngFor使用. _ item_ngTemplateOutlet

这是一个有助于更好地解释事情的教程。

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

推荐阅读