5

我想知道使用 ng-template 的理想情况是什么。我有以下情况。代码如下

<div *ngIf="somecond">html inside1</div>
<div *ngIf="somecond1">html inside2</div>
<div *ngIf="somecond2">html inside3</div>

其他开发人员修改如下

<ng-template #text1>html inside1</ng-template>
<ng-template #text2>html inside2</ng-template>
<ng-template #text3>html inside3</ng-template>

<div *ngIf="somecond;then text1"></div>
<div *ngIf="somecond1;then text2"></div>
<div *ngIf="somecond2;then text3"></div>

在这种情况下，上面是正确的使用方式ng-template或普通代码更好。我什么时候真正使用ng-template

4

2 回答 2

8

理想的情况ng-template是当你想使用该else语句时。

代替：

<div *ngIf="isDisplayed">Item 1</div>
<div *ngIf="!isDisplayed">Item 2</div>

你可以这样做：

<div *ngIf="isDisplayed; else showItem2">Item 1</div>

<ng-template #showItem2>
Item 2
</ng-template>
于 2018-06-18T10:36:52.227 回答
0

ng-template有几个（不太常见）用例。它的内容没有显示，您可以使用 angular dom 局部变量将其发送到指令或组件的输入，以便它们按需要显示。

*ngIf，*ngFor或者*ngSwitch实际上在引擎盖下使用它，星号版本只是一个别名。

正如@TheUnreal 所说，它的主要用例之一是 else 语句，例如显示加载：

<ng-template #loading>loading...</ng-template>
<div *ngIf="data; else loading">
   Content
</div>

您的示例可能不是使用它的理想方式，因为它只会导致模板变得复杂。

于 2018-06-18T11:07:05.650 回答