Angular 2 por qué asterisco (*)

90

En el documento angular 2, * y la plantilla , sabemos que * ngIf, * ngSwitch, * ngFor se puede expandir a la etiqueta ng-template. Mi pregunta es:

Creo que el ngIfo ngForsin *también se puede traducir y expandir a una etiqueta de plantilla por motor angular.

El siguiente código

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

sería lo mismo que

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

Entonces, ¿por qué molestarse en diseñar un asterisco de símbolo extraño ( *) en el angular 2?

maxisacoder
fuente
Desde el enlace, no vimos las <template>etiquetas porque la *sintaxis del prefijo nos permitió omitir esas etiquetas y enfocarnos directamente en el elemento HTML que estamos incluyendo, excluyendo o repitiendo.
Tushar
3
Es su elección usar la etiqueta de la plantilla directamente, de lo contrario puede usar el * que se encarga de la etiqueta de la plantilla por usted. - Fuente
Tushar

Respuestas:

89

La sintaxis de Asterisk es un azúcar sintético para una sintaxis de plantilla más prolija que la directiva se expande debajo del capó, usted es libre de usar cualquiera de estas opciones.

Cita de los documentos :

El asterisco es "azúcar sintáctico". Simplifica ngIf y ngFor tanto para el escritor como para el lector. Bajo el capó, Angular reemplaza la versión de asterisco con una forma más detallada.

Los siguientes dos ejemplos de ngIf son efectivamente iguales y podemos escribir en cualquier estilo:

<!-- 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
fuente
eso es lo que dice el documento. Perdón por las expresiones inexactas de mi significado, he cambiado el detalle de la pregunta.
maxisacoder
2
Me refiero a por qué diseñar este azúcar, por qué simplemente expandirlo por defecto sin usar *.
maxisacoder
2
Hay varias razones por las que puedo pensar: 1. ngIf="expression"no es un enlace de entrada. Si obtiene el valor de DOM, será una cadena. 2. Framework necesitará conocer ngIfy otros casos especiales. Claro, especificar un atributo booleano en algún lugar de DDO servirá, pero debe buscar en el código / documentos para saber la diferencia entre el atributo regular y el azúcar de directiva estructural. 3. Los corchetes, el aserisco, los paréntesis y la falta de ellos propagan claramente lo que está pasando al lector de plantillas.
Klaster_1
1
¿Por qué funcionó sin un asterisco en ng1, para escribir ng-if, ng-show, etc.?
RubberDuckRabbit
1
@RubberDuckRabbit porque ng1 tiene una implementación de enlace completamente diferente. Fue rediseñado para ng2 +.
Klaster_1
32

Angular2 ofrece un tipo especial de directivas: directivas estructurales

Las directivas estructurales se basan en la <template>etiqueta.

El *antes del selector de atributos indica que se debe aplicar una directiva estructural en lugar de una directiva de atributo normal o un enlace de propiedad. Angular2 expande internamente la sintaxis a una <template>etiqueta explícita .

Desde final también existe el <ng-container>elemento que se puede usar de manera similar a la <template>etiqueta, pero admite la sintaxis abreviada más común. Esto es necesario, por ejemplo, cuando dos directivas estructurales deben aplicarse a un solo elemento, que no está respaldado.

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

Angular trata los elementos de la plantilla de una manera especial. La *sintaxis es un atajo que le permite anular la escritura de todo el <template>elemento. Dejame mostrarte como funciona.

usando esto

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

lo quita el azúcar en

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

que elimina el azúcar en

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

también las directivas estructurales de angular como ngFor, ngIf, etc., con el prefijo *solo para diferenciar de estas directivas y componentes personalizados

ver más aquí

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

Pardeep Jain
fuente
3

De los documentos de Angular :

Las directivas estructurales son responsables del diseño HTML. Dan forma o remodelan la estructura del DOM, generalmente agregando, quitando o manipulando elementos.

Al igual que con otras directivas, aplica una directiva estructural a un elemento host . Luego, la directiva hace lo que se supone que debe hacer con ese elemento de host y sus descendientes.

Las directivas estructurales son fáciles de reconocer. Un asterisco (*) precede al nombre del atributo de la directiva como en este ejemplo.

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

A veces, es posible que necesite, <a *ngIf="cond">por ejemplo, cuando es solo una etiqueta. a veces, es posible que desee colocar ngIf alrededor de varias etiquetas sin tener una etiqueta real como envoltorio que lo lleve a <template [ngIf]="cond">etiquetar. ¿Cómo puede saber angular si debería representar el propietario de la directiva ngIf en el resultado final html o no? por lo que es algo más que aclarar el código. es una diferencia necesaria.

Dariush Alipour
fuente