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

90

В документе 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?

максисакодер
источник
Судя по ссылке, мы не видели <template>теги, потому что *синтаксис префикса позволял нам пропустить эти теги и сосредоточиться непосредственно на элементе HTML, который мы включаем, исключаем или повторяем.
Тушар
3
Вы можете напрямую использовать тег шаблона, в противном случае вы можете использовать *, который позаботится о теге шаблона за вас. - Источник
Тушар

Ответы:

89

Синтаксис 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>
Klaster_1
источник
так говорится в документе. Извините за неточное выражение моего смысла, я изменил детали вопроса.
maxisacoder
2
Я имею в виду, зачем создавать этот сахар, зачем просто расширять по умолчанию без использования *.
maxisacoder
2
Есть несколько причин, по которым я могу думать: 1. ngIf="expression"Это не привязка ввода. Если вы получите значение из DOM, это будет строка. 2. Фреймворк необходимо знать и о ngIfдругих особых случаях. Конечно, указание логического атрибута где-нибудь в DDO подойдет, но вам нужно изучить код / ​​документацию, чтобы узнать разницу между обычным атрибутом и структурным директивным сахаром. 3. Квадратные скобки, асериск, круглые скобки и их отсутствие четко передают происходящее читателю шаблонов.
Klaster_1
1
Почему работало без звездочки в ng1, писать ng-if, ng-show и т.д.?
RubberDuckRabbit
1
@RubberDuckRabbit, потому что ng1 имеет совершенно другую реализацию привязки. Он был переработан для ng2 +.
Klaster_1 05
32

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

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

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

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

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>
Гюнтер Цохбауэр
источник
21

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

Пардип Джайн
источник
3

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

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

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

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

<p *ngIf="userInput">{{username}}</p>
кодер
источник
2

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

Дариуш Алипур
источник