<ng-template> </ ng-template>正在加载多次

Question

我正在使用ngTemplateOutlet加载。但是它会多次加载模板。正在加载正确的模板，但会多次执行loadTemplate（）方法。

在HTML中：

<table>
    <thead>
    </thead>
    <tbody>
        <ng-template [ngTemplateOutlet]="loadTemplate()"></ng-template>
    </tbody>
</table>

<ng-template #template1>
    <tr *ngFor="iteration">
        <p>Hiii</p>
    </tr>
</ng-template>

<ng-template #template2>
    <tr *ngFor="iteration">
        <p>Byee</p>
    </tr>
</ng-template>

在我的component.ts中：

@ViewChild('template1') template1: TemplateRef<any>;
@ViewChild('template1') template1: TemplateRef<any>;
loadTemplate(){
    if (condition)
        return this.template1;

    return this.template2;
}

Answer 1

[ngTemplateOutlet]="loadTemplate()"

loadTemplate()每次更改检测运行时都会调用原因。

而是将结果分配loadTemplate()给一个字段并在绑定中使用该字段

[ngTemplateOutlet]="myTemplate"

然后进行更改检测，该ngTemplateOutlet指令可以看到没有更改，也不会重新初始化模板。