Кутова 2, чому зірочка (*)

У документі angular 2, * та шаблоні , ми знаємо, що * ngIf, * ngSwitch, * ngFor можна розширити до тегу ng-template. Моє запитання:

Я думаю, що ngIfабо ngForбез, *також можна перекласти та розширити до тегу шаблону за допомогою кутового механізму.

Наступний код

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

буде таким же, як

<ng-template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</ng-template>

То навіщо турбуватися про розробку дивного символу зірочки ( *) у кутовій 2?

Синтаксис зірочок - це синтаксичний цукор для більш багатослівного синтаксису шаблону, директива якого розширюється до капота, ви можете вільно використовувати будь-який із цих параметрів.

Цитата з документації :

Зірочка - "синтаксичний цукор". Це спрощує ngIf та ngFor як для автора, так і для читача. Під капотом Angular замінює версію зірочки на більш багатослівну форму.

Наступні два приклади ngIf фактично однакові, і ми можемо писати в будь-якому стилі:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Angular2 пропонує спеціальний тип директив - структурні директиви

Структурні директиви базуються на <template>тезі.

*До атрибута селектора вказує на те, що структурна директива повинна бути застосована замість звичайної директиви атрибута або властивості зв'язування. Angular2 внутрішньо розширює синтаксис до явного <template>тегу.

Оскільки final є також <ng-container>елемент, який може використовуватися подібно до <template>тегу, але підтримує більш поширений короткий синтаксис. Це, наприклад, потрібно, коли дві структурні директиви повинні застосовуватися до одного елемента, який не підтримується.

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Кутова обробляє елементи шаблону по-особливому. *Синтаксис ярлик , який дозволяє анулювання писати весь <template>елемент. Дозвольте мені показати вам, як це працює.

використовуючи це

*ngFor="let t of todos; let i=index"

знецірює його

template="ngFor: let t of todos; let i=index" 

який знецірює

<template ngFor [ngForOf]="todos" .... ></template>

також структурні директиви кутові як ngFor, ngIf і т.д. префікс *просто відрізнити від цього користувача директив і компонентів

дивіться більше тут

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a

З кутових документів :

Структурні директиви відповідають за розмітку HTML. Вони формують або змінюють структуру DOM, як правило, додаючи, видаляючи або маніпулюючи елементами.

Як і в інших директивах, ви застосовуєте структурну директиву до елемента хосту . Потім директива робить все, що вона повинна робити з цим елементом хосту та його нащадками.

Структурні директиви легко впізнати. Зірочка (*) передує імені атрибута директиви, як у цьому прикладі.

<p *ngIf="userInput">{{username}}</p>

Іноді вам може знадобитися, <a *ngIf="cond">наприклад, коли це лише один тег. іноді вам може знадобитися розмістити ngIf навколо декількох тегів, не маючи справжнього тегу як обгортку, яка веде вас до <template [ngIf]="cond">тегу. як angular може знати, чи повинен він відображати власника директиви ngIf у кінцевому результаті html чи ні? так що це щось більше, ніж просто зробити код більш зрозумілим. це необхідна різниця.