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

在 Angular 2 中，使用模板语法是很常见的。其中，使用 let-* 是一个比较常用的指令，它在模板中声明一个变量，并将该变量绑定到该指令所在的元素上，可以方便地用于在模板中访问该元素的属性、样式等信息。

1. let-*的基本用法

使用 let-* 可以在模板中创建一个变量，并将其与一个指令所在的元素绑定。

例如，我们可以在模板中使用如下代码：

<div let-myVar="myProp">...</div>

这里，我们使用 let-myVar 指令创建了一个名为 myVar 的变量，并将其绑定到 <div> 元素上。此外，我们还使用了 myProp 参数来指定该变量所代表的属性。

接着，我们可以在模板中使用这个变量：

<p>{{ myVar }}</p>

这样，我们就可以访问该元素的属性，并将其显示在模板中。

2. let-*的高级用法

除了基本用法外，let-* 还有一些高级用法，可以帮助我们更好地使用模板语法。

2.1. 使用 *ngFor 创建循环

在 *ngFor 循环指令中，使用 let-* 可以创建一个循环变量，并将其与当前元素绑定。例如：

<ul>
  <li *ngFor="let item of items; let i = index; let isFirst = first;">
    Item {{ i }}: {{ item }} ({{ isFirst ? 'first' : 'not first' }})
  </li>
</ul>

这里，我们使用 let-item 指令创建了一个名为 item 的变量，并将其绑定到当前元素。此外，我们还使用了 let-i 和 let-isFirst 指令分别创建了名为 i 和 isFirst 的变量，并将它们分别绑定到当前循环的索引和是否为第一个元素的状态上。

2.2. 使用 *ngIf 控制元素的显示

在 *ngIf 条件指令中，使用 let-* 可以创建一个模板局部变量，并将其绑定到当前元素。例如：

<div *ngIf="isVisible; let info = getInformation()">
  <h2>{{ info.title }}</h2>
  <p>{{ info.content }}</p>
</div>

这里，我们使用 let-info 指令创建了一个名为 info 的变量，并将其绑定到当前元素。此外，我们还使用了 isVisible 来控制该元素的显示和隐藏，并使用 getInformation() 来获取与该元素相关的信息。

3. 总结

以上就是 Angular 2 模板中 let-* 指令的基本用法和高级用法。它可以帮助我们更好地使用模板语法，方便地访问元素的属性、样式等信息。