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 ：“*星号是 "syntactic sugar" 表示更复杂的东西。在内部，Angular 将 ngIf 属性转换为 <ng-template> 元素，包裹着宿主元素.."

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

所以，当谈到在 html 中编写语句时，用简单的话来说，哪一个是有条件地呈现内容的合适语句以及为什么。 任何帮助欢迎！

Answer 1

基于 angular 个文档。

The asterisk is "syntactic sugar" for something a bit more complicated. Internally, Angular translates the *ngIf attribute into a element, wrapped around the host element, like this.

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

The *ngIf directive moved to the element where it became a property binding,[ngIf]. The rest of the , including its class attribute, moved inside the element.

Read more here

Answer 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>

angular2 条件 ng 模板与条件 div

angular2 conditional ng-template vs conditional div

angular2-template

ng-template

angular