La palabra clave let en Angular declara una variable de entrada de plantilla a la que se hace referencia dentro de la plantilla. En Angular, la sintaxis micro se usa para configurar una directiva en una string compacta y amigable. Es una capacidad dada en angular para incrustar las variables en la plantilla directamente traduciendo esa string en atributos en la etiqueta <ng-template>.
Sintaxis:
let-variable_name = "Exported_var"
o
let-variable_name
Uso: al ser una sintaxis micro, let se usa para crear una variable temporal en angular que puede vincularse mediante la variable de la clase de componente. Entonces, para traer la información de la variable del componente a la plantilla, usémosla.
Ejemplo 1: con este ejemplo, hay una implementación muy simple de la creación de una variable incrustada usando la etiqueta ng-template. Aquí se forman variables, cuyo valor se asigna como This is ‘GeeksForGeeks’. El siguiente código debe escribirse en el archivo de plantilla del componente, esta es una actualización angular 5.
- Archivo de plantilla:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>let-* in Angular 2</title>
</head>
<body>
<ng-template [ngTemplateOutlet]=
"TheGeekTemplate" [ngTemplateOutletContext]="
{
GeeksForGeeks: 'This is GeeksForGeeks'
}"
#TheGeekTemplate let-GFG="GeeksForGeeks">
<div>{{GFG}}</div>
</ng-template>
</body>
</html>
Salida: en este ejemplo, la referencia de la plantilla se crea mediante #TheGeekTemplate , que se proporciona en la siguiente etiqueta ng-template en la propiedad [ngTemplateOutletContext] . La variable GFG es la variable definida por la palabra clave let que tiene una string que actúa como la variable de exportación y a esta variable se le asigna un nuevo valor dentro de la plantilla mediante la propiedad [ngTemplateOutletContext] . Para la variable Geek, el valor no se proporciona, por lo que toma el valor implicado dado a $implicit , es decir, el valor predeterminado.
This is GeeksForGeeks
Ejemplo 2: Este ejemplo es una demostración para usar la directiva let in ngFor. Aquí, los elementos de una variable se vincularán a la clase del componente y se utilizarán directamente en la variable denominada elt , creada por let-elt .
- Archivo de plantilla:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>let-* in Angular 2</title>
</head>
<body>
<!--The item variable used as -->
<ng-template ngFor let-elt [ngForOf]="array">
<div style="color:green;">
<h1>{{elt}} GeeksForGeeks</h1>
</div>
</ng-template>
</body>
</html>
- Archivo de componentes:
Javascript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// The array variable in component file
array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
Salida: aquí la salida será GeeksForGeeks escrito 10 veces junto con el índice, en el código, la variable de array es una array con elementos en el rango de 1 a 10. Los elementos se muestran mediante el elemento variable incrustado usando let, junto con GeeksForGeeks escrito en eso.
let-* Vs let-*=”Var”: Let-*=”Var” seleccionará el valor de la variable definida en la propiedad ngTemplateOutletContext de la etiqueta <ng-template> y “let-*” seleccionará el valor predeterminado definido en la misma propiedad proporcionada bajo el nombre de la variable $implícita.
Ejemplo 3: Aquí se forman dos variables, para una se asigna el valor y para la segunda variable se vincularán los valores a una variable de exportación. El siguiente código debe escribirse en el archivo de plantilla del componente.
- Archivo de plantilla:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>let-* in Angular 2</title>
</head>
<body>
<ng-template [ngTemplateOutlet]=
"TheGeekTemplate" [ngTemplateOutletContext]="{
$implicit: 'Default Value',
GeeksforGeeks: 'This is GeeksforGeeks'
}"
#TheGeekTemplate let-GFG="GeeksforGeeks" let-Geek>
<div>{{GFG}}</div>
<div>{{Geek}}</div>
</ng-template>
</body>
</html>
Producción:
This is GeeksForGeeks Default Value
Publicación traducida automáticamente
Artículo escrito por piyush25pv y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA