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

Question

假设以下 ItemComponent 被多次创建:

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

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

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

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

Answer 1

Does it affect performance of the app (e.g. startup time, or memory footprint), when I place some ng-templates of the dialogs inside the ItemComponent, or outside the *ngFor?

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

最好保留 ngTemplate在ngFor之外并通过 item在使用 ngTemplateOutlet 时作为上下文的一部分.

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

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