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

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

<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-* 是注入(inject)模板变量的唯一方法。

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-* 赋值。这就是他们所说的微语法 解析器。您实际上可以使用这种特殊语法编写自己的指令，但您必须查看 Angular 的源代码才能弄明白。