Что такое let - * в угловых шаблонах 2?



я наткнулся на странный синтаксис назначения внутри шаблона Angular 2.



<template let-col let-car="rowData" pTemplate="body">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>


получается, что let-col и let-car="rowData" создать две новые переменные col и car который затем может быть привязан к внутри шаблона.



Источник:https://www.primefaces.org/primeng/#/datatable/templating



что это за волшебные let-* синтаксис называется?



как это работает?



в чем разница между let-something и let-something="something else"?



можно ли переписать приведенный выше код с помощью <ng-container> вместо <template> без изменения окончательной структуры DOM?

432   1  

1 ответ:

обновить угловой 5

ngOutletContext была переименована в ngTemplateOutletContext

Смотрите также https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

оригинал

Шаблоны (<template> или <ng-template> С 4.x) добавляются как встроенные представления и передаются контексту.

С let-col контекст собственность $implicit как col в шаблон для привязки. С let-foo="bar" свойство контекста bar как foo.

например, если вы добавляете шаблон

<ng-template #myTemplate let-col let-foo="bar">
  <div>{{col}}</div>
  <div>{{foo}}</div>
</ng-template>

<!-- render above template with a custom context -->
<ng-template [ngTemplateOutlet]="myTemplate"
             [ngTemplateOutletContext]="{
                                           $implicit: 'some col value',
                                           bar: 'some bar value'
                                        }"
></ng-template>

см. также ответ и ViewContainerRef#createEmbeddedView.

*ngFor также работает таким образом. Канонический синтаксис делает это более очевидным

<ng-template let-item [ngForOf]="items" let-i="index" let-odd="odd">
  <div>{{item}}
</ng-template>

здесь NgFor добавляет шаблон в виде встроенного представления в DOM для каждого item на items и добавляет несколько значений (item,index,odd) в контексте.

см. также использование $implict для передачи нескольких параметров

Comments

    Ничего не найдено.