¿Cuál es la diferencia entre paréntesis, corchetes y asteriscos en Angular2?

He estado leyendo la referencia rápida de Angular 1 a 2 en el sitio web de Angular , y una cosa que no entendí completamente fue la diferencia entre estos caracteres especiales. Por ejemplo, uno que usa asteriscos:

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

Entiendo aquí que el símbolo hash (#) se define moviecomo una variable de plantilla local, pero ¿qué significa el asterisco antes ngFor? ¿Y es necesario?

A continuación, están los ejemplos que usan corchetes:

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

De alguna manera entiendo que los corchetes alrededor lo routerLinkunen a ese atributo HTML / directiva angular. ¿Significa esto que son un puntero para que Angular evalúe una expresión? Como [id]="movieId"sería el equivalente de id="movie-{{movieId}}"en Angular 1?

Por último, hay paréntesis:

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

¿Se usan solo para eventos DOM y podemos usar otros eventos como (load)="someFn()"o (mouseenter)="someFn()"?

Supongo que la verdadera pregunta es, ¿tienen estos símbolos un significado especial en Angular 2, y cuál es la forma más fácil de saber cuándo usar cada uno ? ¡¡Gracias!!

Todos los detalles se pueden encontrar aquí: https://angular.io/docs/ts/latest/guide/template-syntax.html

• directiveName- es la forma abreviada de las directivas estructurales donde la forma larga solo se puede aplicar a las <template>etiquetas. La forma corta envuelve implícitamente el elemento donde se aplica en a <template>.

• [prop]="value"es para el enlace de objetos a propiedades ( @Input()de un componente o directiva angular o una propiedad de un elemento DOM).
  Hay formas especiales:

  • [class.className] se une a una clase css para habilitarla / deshabilitarla
  • [style.stylePropertyName] se une a una propiedad de estilo
  • [style.stylePropertyName.px] se une a una propiedad de estilo con una unidad preestablecida
  • [attr.attrName] vincula un valor a un atributo (visible en el DOM, mientras que las propiedades no son visibles)
  • [role.roleName] se une al atributo de rol ARIA (aún no disponible)

• prop="{{value}}"une un valor a una propiedad. El valor está stringificado (también conocido como interpolación)

• (event)="expr"enlaza un controlador de eventos a un @Output()evento DOM

• #varo #vartiene diferentes funciones dependiendo del contexto

  • En un *ngFor="#x in y;#i=index"ámbito, se crean variables para la iteración
    (en beta.17 esto se cambia a * ngFor = "let x in y; let i = index" `)
  • En un elemento DOM, <div #mydiv>una referencia al elemento
  • En un componente angular, una referencia al componente
  • En un elemento que es un componente angular o tiene una directiva angular donde exportAs:"ngForm"se define, #myVar="ngForm"crea una referencia a este componente o directiva.

[]- Enlace de propiedad Unidireccional desde el origen de datos para ver el destino. p.ej

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

Podemos usar bind- en lugar de []

()-> Enlace de eventos Unidireccional desde el objetivo de la vista al origen de datos

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

Podemos usar on- en lugar de ()

[()]- Banana vinculante bidireccional en una caja

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

Podemos usar bindon- en lugar de [()]

Como ya se mencionó, la documentación angular, especialmente el "tutorial del héroe", explica esto más profundamente. Aquí está el enlace si quieres verlo .

Los paréntesis son eventos del elemento en el que está trabajando, como hacer clic en un botón como su ejemplo; esto también podría ser mousedown, keyup, onselect o cualquier acción / evento para ese elemento, y lo que sigue =es el nombre del método a llamar, usando el paréntesis para la llamada. Ese método debe definirse en su clase de componente, es decir:

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

Los corchetes funcionan a la inversa. Deben obtener datos de su clase, lo opuesto al paréntesis que enviaba el evento, por lo que un ejemplo común es el uso de un estilo como este:

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

¿Ver? Le está dando al elemento un estilo basado en su modelo / clase.

Para esto podrías haber usado ...

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

La recomendación es que use llaves dobles para las cosas que imprimirá en la pantalla, como:

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

Independientemente de lo que use, si es coherente, ayudará a la legibilidad de su código.

Por último, para su *pregunta, es una explicación más larga, pero es MUY importante: abstrae la implementación de algunos métodos que, de lo contrario, tendría que hacer para ngForque funcione.

Una actualización importante es que ngForya no usarás hash; debes usarlo de la letsiguiente manera:

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

Una última cosa que vale la pena mencionar es que todo lo anterior se aplica también a sus componentes, por ejemplo, si crea un método en su componente, se llamará usando ():

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