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

Solución:

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

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

• [prop]="value" es para la vinculación de objetos a propiedades (@Input() de un componente angular o directiva 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] enlaza con el atributo de rol 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" enlaza un controlador de eventos a un @Output() o evento DOM

• #var o #var tiene diferentes funciones dependiendo del 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 exportAs:"ngForm" se define, #myVar="ngForm" crea una referencia a este componente o directiva.

[] – Vinculación de propiedad
Unidireccional desde la fuente 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 hasta la fuente de datos

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

Podemos usar on- en lugar de ()

[()]– Encuadernación bidireccional Plátano 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 con más profundidad. Aquí está el enlace si quieres verlo.

Los paréntesis son eventos del elemento en el que está trabajando, como el 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 del = 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 soportes funcionan al revés. Deben obtener datos de su clase, lo opuesto al paréntesis que estaba enviando 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 utilice 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 tu * pregunta, es una explicación más larga, pero es MUY MUY importante: abstrae la implementación de algunos métodos que, de lo contrario, tendrías que hacer para obtener una ngFor trabajar.

Uno actualización importante es que en el ngFor ya no usarás hash; necesitas 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>

---

---

Utiliza Nuestro Buscador