<ng-template></ng-template> 正在加载多次
<ng-template></ng-template> is loading multiple times
我正在使用 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;
}
[ngTemplateOutlet]="loadTemplate()"
导致每次运行更改检测时调用 loadTemplate()
。
而是将 loadTemplate()
的结果分配给一个字段并在绑定中使用该字段
[ngTemplateOutlet]="myTemplate"
然后更改检测和ngTemplateOutlet
指令可以看到没有更改,不会重新初始化模板。
另一种方法是:
<table>
<thead>
</thead>
<tbody>
<ng-template [ngTemplateOutlet]="condition ? template1 : template2"></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>
我正在使用 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;
}
[ngTemplateOutlet]="loadTemplate()"
导致每次运行更改检测时调用 loadTemplate()
。
而是将 loadTemplate()
的结果分配给一个字段并在绑定中使用该字段
[ngTemplateOutlet]="myTemplate"
然后更改检测和ngTemplateOutlet
指令可以看到没有更改,不会重新初始化模板。
另一种方法是:
<table>
<thead>
</thead>
<tbody>
<ng-template [ngTemplateOutlet]="condition ? template1 : template2"></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>