我什么时候真正在 Angular 2+ 中使用 ng-template答案

【问题标题】：When do i really use ng-template in angular 2+我什么时候真正在 Angular 2+ 中使用 ng-template
【发布时间】：2018-06-18 10:33:08
【问题描述】：

我想知道使用 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

【问题讨论】：

标签： angular ng-template

【解决方案1】：

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>

【讨论】：

抱歉，我不明白你为什么要这么做？第一种方法的缺点是什么？

【解决方案2】：

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

*ngIf、*ngFor 或 *ngSwitch 实际上在后台使用它，星号版本只是一个别名。

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

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

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

【讨论】：