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>

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

此外，根据Angular University的博客："Angular已经在我们一直使用的许多结构指令中使用了ng模板：ngIf、ingFor和ngSwitch。"(遵循上面的文档(

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

Answer 1

简单的答案是，如果您可以用ngIf、ngFor或ngSwitch来完成任务，那么就不需要使用ng模板和过度复杂的代码。但是，如果您需要像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]。的其余部分，包括其类属性，在元素内部移动。

点击此处阅读更多