Angular 6 中的“let-”属性是什么？

Question

在ng-bootstrap modal documentation 中使用了某种let-* 属性，似乎用于链接函数或事件以供以后使用。如果您查看示例顶部的 (click) 事件和 let-c / let-d 属性，您可以了解它的作用。这似乎是 Angular 的一个特性，与 ng-bootstrap 无关。

但这叫什么？它有什么作用？此功能的 Angular 文档在哪里？

这是我所指的一个例子。请参阅第一行。

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <!-- content here omitted -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
  </div>
</ng-template>

我在谷歌上搜索过，但无济于事；我得到的唯一结果是使用ngFor 时的let 关键字，这显然不相关。

Answer 1

第三方 Angular 库有时会引入自己的指令支持。这是primeng的一个例子：

<ng-template pTemplate="body" let-item let-columns="columns" let-rowIndex="rowIndex">

阅读 primeng docs 后，这将是有意义的。

Answer 2

let-* 属性是ng-template 的一个特性，通过从上下文中获取变量的值来将变量注入模板。

<ng-template #example let-title="fooBar">
     <span>{{title}}</span>
</ng-template>

在上面的示例中，模板变量title 存在是因为存在let-title，并且它的值将等于上下文对象中的属性fooBar。

<ng-container *ngTemplateOutlet="example; context: {fooBar:'This is the value'}"></ng-container>

上面插入模板引用#example并将context传递给它。

有多种使用模板的方法，但let-* 是唯一注入模板变量的方法。

NgComponent 参考：

https://angular.io/api/common/NgComponentOutlet

参考let微语法：

https://angular.io/guide/structural-directives#microsyntax

关于该主题的不错的博客：

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

很难找到有关 let 的信息，因为它是 Angular microsyntax 解析器的一部分。模板和*ngFor都使用它。

也许你以前在 Angular 中见过这个。

<div ngFor let-item [ngForOf]="items" let-i="index">....</div>

以上与写法相同。

<div *ngFor="let item of items; let i=index">....</div>

因此，在 Angular 中编写 let-* 赋值有两种方法。这就是他们所说的 microsyntax 解析器。您实际上可以编写自己的指令来使用这种特殊语法，但您必须查看 Angular 的源代码才能弄清楚。