Angular2 условный ng-template vs условный div

Я пытаюсь понять структурные директивы 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 Blog: " Angular уже использует ng-template под капотом во многих структурных директивах, которые мы используем постоянно: ngIf, ngFor и ngSwitch ". (следуя документации выше)

Итак, когда дело доходит до написания утверждения в html, простыми словами, какой из них является подходящим для отображения контента при определенных условиях и почему. Любая помощь приветствуется!


angular angular2-template ng-template
person George George    schedule 16.07.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Простой ответ: если вы можете выполнить задачу с помощью ngIf, ngFor или ngSwitch, тогда нет необходимости использовать ng-template и чрезмерно усложнять код. Но если вам нужны такие операторы, как if else в Angular, наиболее распространенным способом является использование ng-template. Как здесь:

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

<ng-template #loading>
    <div>Loading...</div>
</ng-template>
person OlegI    schedule 16.07.2018
comment
@Olegl, спасибо тебе за это. Кажется, в этом есть смысл. - person George George; 16.07.2018

arrow_upward
0
arrow_downward

На основании угловых документов.

Звездочка - это «синтаксический сахар» для чего-то более сложного. Внутренне Angular переводит атрибут * ngIf в элемент, обернутый вокруг основного элемента, как это.

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

Директива * ngIf перемещена в элемент, где она стала привязкой свойства, [ngIf]. Остальная часть, включая его атрибут класса, переместилась внутрь элемента.

Подробнее здесь

person molikh    schedule 16.07.2018
comment
спасибо за ваши усилия, я думаю, что включаю официальную документацию в первоначальный вопрос. Хотя, мне кажется, на мой вопрос еще нет ответа. Подождем, пока ответят другие участники - person George George; 16.07.2018