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 (#) define movie como 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> Entiendo un poco que los corchetes alrededor routerLink lo unen 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, son paréntesis:
<button (click)="toggleImage($event)"> ¿Estos solo se usan 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 etiquetas <template> . La forma abreviada envuelve implícitamente el elemento donde se aplica en una <template> .
[prop]="value" es para vincular 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 vincula 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 enlaza con el atributo de rol de ARIA (aún no disponible) prop="{{value}}" vincula un valor a una propiedad. El valor está en cadena (también conocido como interpolación)
(event)="expr" vincula un controlador de eventos a un evento @Output() o DOM
#var o #var tiene diferentes funciones dependiendo del contexto
*ngFor="#x in y;#i=index" se crean variables de alcance para la iteración<div #mydiv> una referencia al elementoexportAs:"ngForm" , #myVar="ngForm" crea una referencia a este componente o directiva.[] - Enlace de propiedad Unidireccional desde el origen de datos hasta el destino de la vista. p.ej
{{expression}} [target]="expression" bind-target="expression" Podemos usar bind- en lugar de []
() -> Enlace de eventos unidireccional desde el objetivo de la vista hasta la fuente de datos
(target)="statement" on-target="statement"Podemos usar on- en lugar de ()
[()] - Plátano de encuadernación bidireccional en una caja
[(target)]="expression" bindon-target="expression" Podemos usar bindon- en lugar de [()]
Como ya se mencionó, la documentación de Angular, especialmente el "tutorial de héroe", explica esto más profundamente. Aquí te dejo el enlace por si quieres echarle un vistazo .
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 está después de = 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 al revés. Son para obtener datos de su clase, lo contrario de los paréntesis que enviaban 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 corchetes 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 que un ngFor funcione.
Una actualización importante es que en ngFor ya no usarás hash; necesita usar let en su lugar de la siguiente 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>