angular2 条件 ng-template 与条件 div答案

【问题标题】：angular2 conditional ng-template vs conditional divangular2 条件 ng-template 与条件 div
【发布时间】：2018-12-23 17:50:23
【问题描述】：

我正在尝试找出 Angular2 结构指令，但目前我无法发现条件 div 和条件 ng-template 之间的区别。

从技术上讲，这段代码：

  <div *ngIf="true">
    <other-component></other-component>
  </div>

将使用此代码完成相同的工作：

  <ng-template [ngIf]="true">
    <other-component></other-component>
  </ng-template>

根据official documentation ：“*星号是更复杂的东西的“语法糖”。在内部，Angular 将 ngIf 属性转换为 <ng-template> 元素，包裹在宿主元素周围。 "

另外，根据Angular University Blog：“Angular 已经在我们一直使用的许多结构指令中使用了 ng-template：ngIf、 ngFor 和 ngSwitch。” （按照上面的文档）

所以，当谈到用 html 编写语句时，简单来说，哪一种是有条件地呈现内容的正确方法以及为什么。欢迎任何帮助！

【问题讨论】：

【解决方案1】：

基于角度文档。

星号是“语法糖”，表示更多内容复杂的。在内部，Angular 将 *ngIf 属性转换为元素，包裹在宿主元素周围，像这样。

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

*ngIf 指令移动到它所在的元素属性绑定，[ngIf]。的其余部分，包括它的类属性，在元素内部移动。

【讨论】：

【解决方案2】：

简单的答案是，如果您可以使用ngIf、ngFor 或ngSwitch 完成任务，则无需使用 ng-template 并将代码过度复杂化。但是如果你需要在Angular中使用if else这样的语句，最常见的方式是使用ng-template。喜欢这里：

<div class="lessons-list" *ngIf="lessons else loading">
  ... 
</div>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>

【讨论】：