Что такое let * в шаблонах Angular 2?

157

Я наткнулся на странный синтаксис присваивания внутри шаблона 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"?

angular angular2-template primeng

— Стивен Лиекенс
источник

@NiekT. это отличается, пусть * в угловых 2 является шаблоном переменной области видимости

— Sterling Archer

angular.io/docs/ts/latest/guide/… найдите слово «let» (с пробелом) и перейдите к 9-му. Есть хорошее объяснение того, что делает эта переменная шаблона

— Стерлинг Арчер

@SterlingArcher Спасибо за исправление, я новичок в JS и Angular.

— Nodon Darkeye

Ответы:

154

обновление Angular 5

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

оригинал

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

При let-colэтом свойство context $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 ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd">
  <div>{{item}}</div>
</ng-template>

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

— Гюнтер Цохбауэр
источник

Спасибо за объяснение ngOutletContext. Это было недостающее звено между тем, что я уже знал, и информацией, которую я не смог найти в документации.

— Стивен Лиекенс

Я не думаю, что он называется так, ngTemplateOutletContextкак вы предлагали в выпуске angular 5. В документах также ничего не говорится о том, что он устарел. angular.io/api/common/NgTemplateOutlet

— Джесси

5 еще не выпущено. Не уверен, что показывают документы. С тех пор в списке изменений нет ничего нового.

— Гюнтер Цохбауэр

Спасибо за этот ответ, отсутствует документация о том, что *делает синтаксис.

— dook

Не должно быть вторым ng-шаблоном (тот, что с ngTemplateOutlet) действительно ng-шаблоном. Может быть, NG-контейнер будет лучше? Оба будут работать, я думаю, но ng-контейнер является семантически более правильным. Или я не прав?

— Ондрей Петерка

Микросинтаксис Angular позволяет вам сконфигурировать директиву в виде удобной компактной строки. Синтаксический анализатор microsyntax преобразует эту строку в атрибуты <ng-template>. Ключевое слово let объявляет входную переменную шаблона, на которую вы ссылаетесь в шаблоне.

— dontry
источник