угловой 2, почему звездочки (*)

Question

угловой 2, почему звездочки (*)

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

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

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

<template [ngIf]="currentHero">

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

</template>

493 5

javascript angular

5 ответов:

Comments

Ничего не найдено.

Klaster_1 · Accepted Answer · 2018-10-03 08:52:27

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

цитата docs:
звездочка-это "синтаксический сахар". Это упрощает ngIf и ngFor для и писатель, и читатель. Под капотом угловой заменяет звездочка версия с более подробной формой.

следующие два примера ngIf являются эффективно то же самое и мы можем написать в любом стиле:


<p *ngIf="condition">
  Our heroes are true!
</p>


<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Günter Zöchbauer · Accepted Answer · 2017-08-28 12:15:31

Angular2 предлагает особый вид директив -структурные директивы

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

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

так как финал есть и то <ng-container> элемент, который может использоваться аналогично <template> тег, но поддерживает более распространенный синтаксис короткой руки. Это, например, требуется, когда две структурные директивы должны применяться к одному элементу, который не является supportd.
<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Pardeep Jain · Accepted Answer · 2016-10-17 08:35:14

угловой обрабатывает элементы шаблона особым образом. Элемент * синтаксис-это ярлык, который позволяет вам аннулировать запись всего <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

Dariush Alipour · Accepted Answer · 2017-03-22 01:47:24

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

Chip · Accepted Answer · 2018-02-14 04:49:02

С Угловое документы:

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

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

структурные директивы легко узнать. Звездочка ( * ) предшествует имени атрибута директивы, как в этом примере.
<p *ngIf="userInput">{{username}}</p>