Angular 2, почему звездочка (*)

В документе angular 2 * и шаблоне мы знаем, что * ngIf, * ngSwitch, * ngFor можно развернуть до шаблона тег. Мой вопрос:

Я думаю, что ngIf или ngFor без * также могут быть переведены и расширены в тег шаблона с помощью angular engine. Так зачем беспокоиться о создании звездочки странного символа (*) в angular 2?

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

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

Ответы

Ответ 1

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

Цитата из docs:

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

Ответ 2

Angular2 предлагает специальные директивы - Структурные директивы

Структурные директивы основаны на теге <template>.

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

С окончанием существует также элемент <ng-container>, который можно использовать аналогично тегу <template>, но поддерживает более распространенный короткий синтаксис. Это, например, требуется, когда две структурные директивы должны применяться к одному элементу, который не поддерживается.

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

Ответ 3

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

Ответ 4

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