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

Question

Ho letto il riferimento rapido Angolare 1 - 2 nello Angular website e una cosa che non ho compreso completamente era la differenza tra questi caratteri speciali. Per esempio uno che utilizza asterischi:

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

capisco qui che il simbolo cancelletto (#) definisce movie come variabile modello locale, ma che cosa fa l'asterisco prima ngFor significa? E 'necessario?

Avanti, sono gli esempi che utilizzano le staffe:

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

ho un po 'di capire che le parentesi intorno routerLink legano a quel 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 Angular 1?

Infine, siamo parentesi:

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

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

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

Answer 1

Tutti i dettagli possono essere trovati qui: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName - è la forma abbreviata di mano per le direttive strutturali in cui la forma lunga può essere applicato solo a <template> tag. Il modulo breve racchiude implicitamente l'elemento in cui è applicato in un <template>.

• [prop]="value" è un oggetto che si lega alle proprietà (@Input() di un componente o direttiva Angolare o una proprietà di un elemento DOM).
  ci sono forme speciali:

  • [class.className] si lega a una classe CSS per abilitare/disabilitare lo
  • [style.styleName] si lega ad una proprietà di stile
  • [style.styleName.px] si lega ad una proprietà di stile di un gruppo preimpostato
  • [attr.attrName] associa un valore a un attributo (visibile nel DOM, mentre le proprietà non sono visibili)
  • [role.roleName] si associa all'attributo del ruolo ARIA (non ancora disponibile)

• prop="{{value}}" associa un valore a una proprietà.Il valore viene stringata (alias interpolazione)

• (event)="expr" lega un gestore eventi per un evento @Output() o DOM

• #var o #var ha funzioni diverse a seconda del contesto

  • In una *ngFor="#x in y;#i=index" ambito vengono create variabili per l'iterazione
    (nella versione beta.17 questo è cambiato in * ngFor = "lascia x in y; sia i = indice" `)
  • 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 ha una direttiva angolare in cui è definito exportAs:"ngForm", #myVar="ngForm" crea un riferimento a questo componente o direttiva.