Angular 2 porque asterisco (*)

90

No angular 2 document, * e template , sabemos que * ngIf, * ngSwitch, * ngFor pode ser expandido para a tag ng-template. Minha pergunta é:

Acho que ngIfou ngForsem *também pode ser traduzido e expandido para tag de modelo pelo motor angular.

O seguinte código

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

seria o mesmo que

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

Então, por que se preocupar em projetar um símbolo estranho asterisco ( *) no angular 2?

javascript angular angular-directive maxisacoder
fonte
No link, não vimos as <template>tags porque a *sintaxe do prefixo nos permitiu ignorar essas tags e nos concentrarmos diretamente no elemento HTML que estamos incluindo, excluindo ou repetindo.
Tushar,
1
angular.io/docs/ts/latest/guide/…
TGH
3
É sua escolha usar a tag de modelo diretamente, caso contrário, você pode usar o * que cuida da tag de modelo para você. - Fonte
Tushar

Respostas:

89

A sintaxe do asterisco é um açúcar sintático para uma sintaxe de modelo mais prolixo, cuja diretiva se expande para o interior, você está livre para usar qualquer uma dessas opções.

Citação dos documentos :

O asterisco é "açúcar sintático". Ele simplifica o ngIf e o ngFor tanto para o escritor quanto para o leitor. Sob o capô, o Angular substitui a versão com asterisco por uma forma mais detalhada.

Os próximos dois exemplos ngIf são efetivamente os mesmos e podemos escrever em qualquer um dos estilos:

<!-- 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
fonte
é o que diz o documento. Desculpe por expressões imprecisas de meu significado, eu mudei o detalhe da pergunta.
maxisacoder
2
Quero dizer, por que projetar este açúcar, por que apenas expandir por padrão sem usar *.
maxisacoder de
2
Posso pensar em vários motivos: 1. ngIf="expression"não é uma ligação de entrada. Se você obtiver o valor do DOM, será uma string. 2. A estrutura precisará saber sobre ngIfe outro sendo o caso especial. Claro, especificar um atributo booleano em algum lugar no DDO servirá, mas você deve olhar em code / docs para saber a diferença entre atributo regular e açúcar de diretiva estrutural. 3. Colchetes, aserisco, parênteses e a falta deles propagam claramente o que está acontecendo no leitor de modelo.
Klaster_1
1
Por que funcionou sem um asterisco em ng1, para escrever ng-if, ng-show etc?
RubberDuckRabbit
1
@RubberDuckRabbit porque ng1 tem uma implementação de ligação completamente diferente. Ele foi redesenhado para ng2 +.
Klaster_1
32

Angular2 oferece um tipo especial de diretivas - diretivas estruturais

As diretivas estruturais são baseadas na <template>tag.

O *antes do seletor de atributo indica que uma diretiva estrutural deve ser aplicada em vez de uma diretiva de atributo normal ou associação de propriedade. Angular2 expande internamente a sintaxe para uma <template>tag explícita .

Desde o final, há também o <ng-container>elemento que pode ser usado de forma semelhante à <template>tag, mas suporta a sintaxe abreviada mais comum. Isso é necessário, por exemplo, quando duas diretivas estruturais devem ser aplicadas a um único elemento, o que não é suportado.

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>
Günter Zöchbauer
fonte
21

O Angular trata os elementos do template de uma maneira especial. A *sintaxe é um atalho que permite cancelar a escrita de todo o <template>elemento. Deixe-me mostrar como funciona.

usando isso

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

de-açúcar em

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

que de-açúcar em

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

também as diretivas estruturais do angular como ngFor, ngIf etc. prefixadas por *apenas para diferenciar dessas diretivas e componentes personalizados

veja mais aqui

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

Pardeep Jain
fonte
3

De documentos Angular :

As diretivas estruturais são responsáveis ​​pelo layout HTML. Eles moldam ou remodelam a estrutura do DOM, geralmente adicionando, removendo ou manipulando elementos.

Como acontece com outras diretivas, você aplica uma diretiva estrutural a um elemento host . A diretiva então faz tudo o que é suposto fazer com aquele elemento host e seus descendentes.

As diretivas estruturais são fáceis de reconhecer. Um asterisco (*) precede o nome do atributo de diretiva como neste exemplo.

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

Às vezes você pode precisar, <a *ngIf="cond">por exemplo, quando é apenas uma tag. às vezes você pode querer colocar o ngIf em torno de várias tags sem ter uma tag real como um wrapper que o leva a <template [ngIf]="cond">tag. como o angular pode saber se deve renderizar o proprietário da diretiva ngIf no html do resultado final ou não? então é algo mais do que apenas tornar o código mais claro. é uma diferença necessária.

Dariush Alipour
fonte