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

Так зачем создавать странный символ звездочки ( *) в angular 2?

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

Цитата из документов :

Звездочка - «синтаксический сахар». Это упрощает 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>

Angular особым образом обрабатывает элементы шаблона. *Синтаксис ярлык , который позволяет аннулированию писать весь <template>элемент. Позвольте мне показать вам, как это работает.

используя это

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

обезвоживает его в

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

который обессахаривает в

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

также структурные директивы angular, такие как ngFor, ngIf и т. д., с префиксом, *просто чтобы отличаться от этих пользовательских директив и компонентов

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

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

Из документов Angular :

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

Как и в случае с другими директивами, вы применяете структурную директиву к элементу хоста . Затем директива делает все, что она должна делать с этим элементом хоста и его потомками.

Структурные директивы легко распознать. Звездочка (*) предшествует имени атрибута директивы, как в этом примере.

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

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