Qual è la differenza tra parentesi, parentesi e asterischi in Angular2?

Ho letto il riferimento rapido da 1 a 2 di Angular nel sito Web di Angular e una cosa che non ho capito completamente era la differenza tra questi personaggi speciali. Ad esempio uno che utilizza asterischi:

<tr *ngFor="#movie of movies">
  <td>{{movie.title}}</td>
</tr>

Capisco qui che il simbolo hash (#) definisce movieuna variabile di modello locale, ma cosa significa prima l'asterisco ngFor? E è necessario?

Successivamente, sono gli esempi che utilizzano le parentesi:

<a [routerLink]="['Movies']">Movies</a>

In qualche modo capisco che le parentesi intorno lo routerLinklegano a quell'attributo HTML / direttiva angolare. Questo significa che sono un puntatore per Angular per valutare un'espressione? Come [id]="movieId"sarebbe l'equivalente di id="movie-{{movieId}}"in Angolare 1?

Infine, sono le parentesi:

<button (click)="toggleImage($event)">

Sono utilizzati solo per eventi DOM e possiamo usare altri eventi come (load)="someFn()"o (mouseenter)="someFn()"?

Immagino che la vera domanda sia: questi simboli hanno un significato speciale in Angular 2, e qual è il modo più semplice per sapere quando usarli ? Grazie!!

Tutti i dettagli sono disponibili qui: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName - è la forma abbreviata per le direttive strutturali in cui è possibile applicare la forma lunga <template> tag. La forma breve avvolge implicitamente l'elemento in cui è applicata in a <template>.

• [prop]="value" è per l'associazione di oggetti alle proprietà (@Input() di un componente angolare o direttiva o una proprietà di un elemento DOM).
  Esistono forme speciali:

  • [class.className] si lega a una classe CSS per abilitarla / disabilitarla
  • [style.stylePropertyName] si lega a una proprietà di stile
  • [style.stylePropertyName.px] si lega a una proprietà di stile con un'unità preimpostata
  • [attr.attrName] associa un valore a un attributo (visibile nel DOM, mentre le proprietà non sono visibili)
  • [role.roleName] si lega all'attributo ruolo ARIA (non ancora disponibile)

• prop="{{value}}"associa un valore a una proprietà. Il valore è stretto (aka interpolazione)

• (event)="expr"associa un gestore di eventi a un @Output()evento o DOM

• #varo #varha funzioni diverse a seconda del contesto

  • In un *ngFor="#x in y;#i=index"ambito vengono create le variabili per l'iterazione
    (in beta.17 questo viene cambiato in * ngFor = "let x in y; let i = index" `)
  • Su un elemento DOM <div #mydiv>un riferimento all'elemento
  • Su un componente angolare un riferimento al componente
  • Su un elemento che è un componente angolare o che ha una direttiva angolare dove exportAs:"ngForm"è definito, #myVar="ngForm"crea un riferimento a questo componente o direttiva.

[]- Binding proprietà Unidirezionale dall'origine dati per visualizzare la destinazione. per esempio

{{expression}}
[target]="expression"
bind-target="expression"

Possiamo usare bind- anziché []

()-> Event Binding A senso unico dalla vista target all'origine dati

(target)="statement"
on-target="statement"

Possiamo usare on invece di ()

[()]- Banana vincolante bidirezionale in una scatola

[(target)]="expression"
bindon-target="expression"

Possiamo usare bindon- invece di [()]

Come già accennato, la documentazione angolare, in particolare il "tutorial dell'eroe", spiega questo più in profondità. Ecco il link se vuoi verificarlo .

Le parentesi sono eventi dell'elemento su cui stai lavorando, come il clic su un pulsante come il tuo esempio; questo potrebbe anche essere mousedown, keyup, onselect o qualsiasi azione / evento per quell'elemento, e ciò che è dopo =è il nome del metodo da chiamare - usando la parentesi per la chiamata. Tale metodo dovrebbe essere definito sulla classe del componente, ovvero:

<element (event)="method()"></element>

Le parentesi funzionano nell'altro modo. Devono ottenere dati dalla tua classe - l'opposto della parentesi che stava inviando l'evento - quindi un esempio comune è l'uso di uno stile come questo:

<element [ngStyle]="{display:someClassVariable}">

Vedere? Stai dando all'elemento uno stile basato sul tuo modello / classe.

Per questo avresti potuto usare ...

<element style="display:{{ModelVariable}};">

La raccomandazione è di usare doppie parentesi graffe per cose che verranno stampate sullo schermo come:

<h1>{{Title}}</h1>

Qualunque cosa tu usi, se sei coerente, aiuterà la leggibilità del tuo codice.

Infine, per la tua *domanda, è una spiegazione più lunga, ma è MOLTO importante: riassume l'implementazione di alcuni metodi che altrimenti dovresti fare per farlo ngForfunzionare.

Un aggiornamento importante è che ngFornon utilizzerai più l'hash; è necessario utilizzare letinvece come segue:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

Un'ultima cosa degna di nota è che tutto quanto sopra vale anche per i tuoi componenti, ad esempio se crei un metodo nel tuo componente, verrà chiamato usando ():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>