什么是“让-"?Angular 6 中的属性? [英] What is the "let-" attribute in Angular 6?

问题描述

在 ng-bootstrap 模态文档 有某种 let-* 属性的用途，似乎用于链接函数或事件以供以后使用.如果您查看示例顶部的 (click) 事件和 let-c/let-d 属性，您可以获得对它的作用的感觉.这似乎是 Angular 的一个特性，与 ng-bootstrap 无关.

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

这是我所指的一个例子.见第一行.

<ng-template #content let-c="close";let-d=解雇"><div class="modal-header"><h4 class="modal-title";id="modal-basic-title">配置文件更新</h4><按钮类型=按钮"类=关闭"aria-label =关闭"(click)="d('Cross click')"><span aria-hidden="true">&times;</span>

<div class="modal-body"><!-- 此处省略内容-->

<div class="modal-footer"><按钮类型=按钮"class="btn btn-outline-dark";(click)=c('Save click')">Save</button>

</ng-模板>

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

解决方案

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

<span>{{title}}</span></ng-模板>

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

<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 微语法 解析器的一部分.模板和 *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 的源代码才能弄清楚.

In the ng-bootstrap modal documentation there are uses of some kind of let-* attribute that seemed to be used to link a function or event for later use. If you look at the (click) events and the let-c / let-d attributes at the top of the examples, you can get a feel for what it does. This appears to be a feature of Angular and has nothing to do with ng-bootstrap.

But what is this called? What does it do? Where are the Angular docs for this feature?

Here's an example of what I'm referring to. See the very first line.

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

I've Googled this to no avail; the only results I get are about the let keyword when using ngFor, which is obviously not related.

解决方案

The let-* attribute is a feature of the ng-template to inject a variable into the template by sourcing the variable's value from the context.

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

In the above example the template variable title exists because there is let-title and it's value will be equal to the property fooBar from the context object.

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

The above inserts the template reference #example and passes it the context.

There are multiple ways to use a template but the let-* is the only way to inject template variables.

Reference for NgComponent:

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

Reference to the let microsyntax:

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

A nice blog on the topic:

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

It's difficult to find information about let because it's part of the Angular microsyntax parser. Which is used by both templates and *ngFor.

Maybe you've seen this before in Angular.

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

The above is the same as writing.

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

So there are two ways to write a let-* assignment in Angular. This is what they call the microsyntax parser. You can actually write your own directives that use this special syntax, but you have to look at the source of Angular to figure it out.

这篇关于什么是“让-"?Angular 6 中的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！