代码之家 › 专栏 › 技术社区 › pbristow

角度6中的“let-”属性是什么?

ng-bootstrap angular6 angular

4

pbristow · 技术社区 · 7 年前

在 ng-bootstrap modal documentation 有一些用途 let-* 用于链接函数或事件以供以后使用的属性。如果你看 (click) 事件和 let-c / let-d 在示例顶部的属性中,您可以了解它的作用。这似乎是角的特征,与此无关。 ng引导 .

但这叫什么?它是做什么的?此功能的角度文档在哪里?

这是我所指的例子。看第一行。

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

我在google上搜索了这个结果,但没有用;我得到的唯一结果是 let 使用时使用关键字 ngFor ,这显然不相关。

1 回复 | 直到 7 年前

1

9

Reactgular 7 年前

这个 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 .

有多种方法可以使用模板,但是 让- * 是只有注入模板变量的方法。

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/

很难找到有关 让 因为它是角的一部分 微创税 解析器。模板和 *ngFor .

也许你以前见过这个。

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

以上内容与写作相同。

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

所以有二写作方法 让- * 角度分配。这就是他们所说的 微创税 解析器。实际上,您可以使用这个特殊的语法编写自己的指令,但是您必须查看角度的来源来了解它。