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

Angular中的let关键字声明在模板中引用的模板输入变量。在Angular中，微语法用于在紧凑且友好的字符串配置指令。通过将字符串转换为标记上的属性，可以将角度直接嵌入模板中，这是按角度提供的功能。

句法：

let-variable_name = "Exported_var"

或者

let-variable_name

用法：作为一种微观语法， let用于创建角度临时变量，该临时变量可以通过组件类的变量进行链接。因此，要将组件变量信息带入模板，请使用它。

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

• 模板文件：

HTML

 

    
    
    
    

 

    
        
{{GFG}}
 
    
 

 

输出：在此示例中，模板引用由#TheGeekTemplet创建，该参考在[ngTemplateOutletContext]属性下的下一个ng- templet标记中给出。变量GFG是由let关键字定义的变量，该关键字具有用作导出变量的字符串，并且[ngTemplateOutletContext]属性在模板内为该变量分配了一个新值。对于变量Geek，未提供该值，因此它采用了赋予$ implicit的隐含值，即默认值。

This is GeeksForGeeks

示例2：此示例是在ngFor指令中使用let的演示。在这里，变量项目将链接到组件类，并直接在由let-elt生成的名为elt的变量中使用。

• 模板文件：

的HTML

 

    
    
    
    

 

   
    
    
        

            
{{elt}} GeeksForGeeks
        
    

 

• 组件文件：

Java脚本

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

输出：这里的输出将是与索引一起写入10次的GeeksForGeeks，在代码中，数组变量是具有1到10范围内的元素的数组。这些元素由使用let的嵌入式变量项以及与写入的GeeksForGeeks一起显示。它。

let- * Vs let-* =“ Var”：let-* =“ Var”将选择标记的ngTemplateOutletContext属性中定义的变量的值，而“ let- *”将选择在$ implicit变量名称下给定的相同属性中定义的默认值。

示例3：这里形成了两个变量，为一个变量赋值，对于第二个变量，这些值将链接到导出变量。下面的代码将被写入组件的模板文件中。

• 模板文件：

的HTML

 

    
    
    
    

 

    
        
{{GFG}}
        
{{Geek}}
 
    

 

输出：

This is GeeksForGeeks
Default Value