Angolare 2 perché asterisco (*)

Nel documento angolare 2, * e nel modello , sappiamo che * ngIf, * ngSwitch, * ngFor può essere espanso al tag ng-template. La mia domanda è:

Penso che il ngIfo ngForsenza *può anche essere tradotto ed espanso in tag template dal motore angolare.

Il codice seguente

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

sarebbe lo stesso di

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

Allora perché preoccuparsi di progettare uno strano simbolo asterisco ( *) nell'angolo 2?

La sintassi dell'asterisco è uno zucchero sintatico per una sintassi di modelli più prolissa a cui la direttiva si espande sotto il cofano, sei libero di usare qualsiasi di queste opzioni.

Citazione dai documenti :

L'asterisco è "zucchero sintattico". Semplifica ngIf e ngFor sia per lo scrittore che per il lettore. Sotto il cofano, Angular sostituisce la versione asterisco con una forma più prolissa.

I prossimi due esempi ngIf sono effettivamente gli stessi e possiamo scrivere in uno dei due stili:

<!-- 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>

Angular2 offre un tipo speciale di direttive: direttive strutturali

Le direttive strutturali si basano sul <template>tag.

La *prima del selettore di attributo indica che deve essere applicata una direttiva strutturale invece di una normale direttiva di attributo o di associazione di proprietà. Angular2 espande internamente la sintassi a un <template>tag esplicito .

Essendo final c'è anche l' <ng-container>elemento che può essere utilizzato in modo simile al <template>tag ma supporta la più comune sintassi abbreviata. Ciò è richiesto ad esempio quando due direttive strutturali devono essere applicate a un singolo elemento, che non è supportato.

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Angular tratta gli elementi del modello in un modo speciale. La *sintassi è una scorciatoia che ti consente di evitare di scrivere l'intero <template>elemento. Lascia che ti mostri come funziona.

usando questo

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

lo traduce in

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

che viene poi convertito in

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

anche le direttive strutturali di Agular come ngFor, ngIfecc. Prefissate da *solo per differenziarle da altre direttive e componenti personalizzati

vedere di più qui

Da documenti Angular :

Le direttive strutturali sono responsabili del layout HTML. Modellano o rimodellano la struttura del DOM, in genere aggiungendo, rimuovendo o manipolando elementi.

Come con altre direttive, applicate una direttiva strutturale a un elemento host . La direttiva quindi fa tutto ciò che dovrebbe fare con quell'elemento host e i suoi discendenti.

Le direttive strutturali sono facili da riconoscere. Un asterisco (*) precede il nome dell'attributo della direttiva come in questo esempio.

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

A volte potrebbe essere necessario, <a *ngIf="cond">ad esempio, quando è solo un tag. a volte potresti voler mettere ngIf attorno a più tag senza avere un tag reale come wrapper che ti porta a <template [ngIf]="cond">taggare. come può angular sapere se deve rendere il proprietario della direttiva ngIf nel risultato finale html o no? quindi è qualcosa di più che rendere il codice più chiaro. è una differenza necessaria.