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

Question

在 ng-bootstrap modal documentation 中使用了某种 let-* 属性，似乎用于 link 函数或事件供以后使用。如果您查看示例顶部的 (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 的一项功能，可通过从上下文获取变量值将变量注入模板。

<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 的源代码才能弄明白。

Answer 2

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

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

阅读 primeng docs 之后就会明白这一点。

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

What is the "let-" attribute in Angular 6?

ng-bootstrap

angular

angular6