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

formularios reactivos en angular

Question

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 la movie como una variable de plantilla local, pero ¿qué significa el asterisco antes de 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 de routerLink vinculan 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!!

Answer 1

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 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 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 que un ngFor funcione.

Una actualización importante es que en ngFor ya no ngFor hash; necesita usar let 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 también se aplica a sus componentes, por ejemplo, si crea un método en su componente, se llamará usando () :

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

Answer 2

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 corta envuelve implícitamente el elemento donde se aplica en una <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] une a una clase css para habilitarla / deshabilitarla
  • [style.stylePropertyName] une a una propiedad de estilo
  • [style.stylePropertyName.px] 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] une al atributo de rol ARIA (aún no disponible)

• prop="{{value}}" vincula un valor a una propiedad. El valor está stringificado (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 según el contexto

  • En un *ngFor="#x in y;#i=index" se crean variables de alcance 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 se exportAs:"ngForm" , #myVar="ngForm" crea una referencia a este componente o directiva.

Answer 3

[] - Enlace de propiedad Unidireccional desde el origen de datos hasta el objetivo de visualización. p.ej

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

Podemos usar bind- en lugar de []

() -> Enlace de eventos Unidireccional desde el objetivo de 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 [()]