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

В угловом 2 документе, ngIf и шаблоне , мы знаем, что ngFor *, * ngSwitch, <hero-detail * ngIf = "currentHero" [ hero ] = "currentHero" > </ hero-detail> <template [ ngIf ] = " currentHero " > <hero-detail [ hero ] = " currentHero " > </ hero-detail> </ template> можно развернуть до тега шаблона. Мой вопрос:

Я думаю, что ngIfили ngForнет можно также перевести и расширить до тега шаблона угловым движком. Так зачем беспокоиться о создании странного символа asterisk ( ) в угловом 2? <!-- 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>*

<template>
*

javascript,angular,

56

Ответов: 5


59 принят

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

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

Звездочка - это «синтаксический сахар». Это упрощает ngIf и ngFor как для писателя, так и для читателя. Под капотом Angular заменяет версию звездочки более подробной формой.

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

<template>

17

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

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

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

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

<template>

13

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


1

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


1

Из угловых документов :

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

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

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

<p *ngIf="userInput">{{username}}</p>
JavaScript, угловой,
Похожие вопросы