在Angular 2模板中，let-*的含义是什么

Angular中的let关键字声明了一个模板输入变量，在模板中被引用。在Angular中，micro语法被用来在一个紧凑而友好的字符串中配置一个指令。在Angular中，通过将字符串转化为<ng-template>标签上的属性，可以直接将变量嵌入到模板中，这是一种能力。

语法:

let-variable_name = "Exported_var"

或者

let-variable_name

使用方法：作为一个微型语法，let被用来在angular中创建临时变量，它可以被组件类的变量所链接。因此，为了将组件变量信息带到模板中，let被使用。

例子1：通过这个例子，有一个非常简单的使用ng-template标签创建一个嵌入式变量的实现。这里形成了变量，其值被分配为这是’GeeksForGeeks’。下面的代码要写在组件的模板文件中，这是一个angular 5的更新。

Template File:

<!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>

输出：在这个例子中，模板引用是由#TheGeekTemplate创建的，它在下一个ng-template标签的[ngTemplateOutletContext]属性下给出。变量GFG是由let关键字定义的变量，它有一个字符串作为导出变量，在模板中通过[ngTemplateOutletContext]属性给这个变量分配一个新的值。对于变量Geek，没有提供值，所以它采用给$implicit的暗示值，即默认值。

This is GeeksForGeeks

实例2：这个例子是一个在ngFor指令中使用let的演示。在这里，一个变量项将被链接到组件类，并直接用于名为elt的变量，由let-elt制成。

Template File:

<!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>

Component File:

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]
}

输出：这里的输出将是GeeksForGeeks和索引一起写了10次，在代码中，数组变量是一个元素范围为1到10的数组。在代码中，数组变量是一个有1到10个元素的数组，这些元素由内嵌的变量项用let显示，并在上面写上GeeksForGeeks。

在Angular 2模板中，let-*的含义是什么？

let-* Vs let-*=”Var”: let-*=”Var “将提取<ng-template>标签的ngTemplateOutletContext属性中定义的变量值<ng-template>，”let-*”将提取$implicit变量名下的同一属性中定义的默认值。

例子3：这里形成了两个变量，一个变量的值被分配，第二个变量的值将被链接到一个出口变量。下面的代码将被写在组件的模板文件中。

Template File:

<!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>

输出: