Saltar al contenido

¿Qué es $ implícito en angular 2?

Solución:

Puede definir la variable local en ng-template mediante let-name

Cuando angular crea una plantilla llamando createEmbeddedView también puede pasar el contexto que se utilizará dentro ng-template

Usando la llave $implicit en el contexto, el objeto establecerá su valor como predeterminado. Entonces, si escribimos:

vcRef.createEmbeddedView(template, { $implicit: 'value' })

y tenemos plantilla

<ng-template let-foo> 
 {{ foo }}
</ng-template>

entonces podemos pensar en ello como

<ng-template let-foo="$implicit"> 
  {{ foo }}
</ng-template>

asi que foo será igual value

Ejemplo de plunker

Por otro lado, si tenemos un contexto como:

{ bar: 'value' }

tenemos que declarar variables como:

let-foo="bar"

Para múltiples variables, debe hacer algo como a continuación, una plantilla sería:

<ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{$implicit: 'Hello', key2: 'value2', key3: 'value3'}"> </ng-template>

luego

<ng-template #template let-default let-key2="key2" let-key3="key3">
{{default}}
{{key2}}
{{key3}}
</ng-template>

entonces, la salida será,

default = Hello
key2 = value2
key3 = value3

Si tiene que pasar solo una variable a la plantilla desde el contenedor donde la estamos referenciando, podríamos usar

<ng-container *ngTemplateOutlet="deleteClient;context: firstName">
</ng-container>

Y utilícelo así.

<ng-template #deleteClient let-client="firstName">
Are you sure? Want to remove {{ client }} !
</ng-template>

Donde, como si tuviera que pasar el objeto a la plantilla, podríamos usar

<ng-container *ngTemplateOutlet="deleteClient;context: { $implicit: client }"> 
</ng-container>

Y utilícelo así.

<ng-template #deleteClient let-client>
Are you sure? Want to remove {{ client.firstName }} {{ client.lastName }}!
</ng-template>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *