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

Question

在ng-bootstrap 模态文档中,存在某种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>

我用谷歌搜索这无济于事; 我得到的唯一结果是关于let使用时的关键字ngFor,这显然是无关的.

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>

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