angular2条件ng模板与条件div

Question

我正在尝试找出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 ，< strong> ngFor 和 ngSwitch 。” （按照上面的文档）

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

Answer 1

简单的答案是，如果您可以使用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>

Answer 2

基于有角度的文档。

  

星号是“语法糖”   复杂。在内部，Angular将* ngIf属性转换为    元素，包裹在宿主元素上，像这样。

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

  

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

Read more here