O que é let- * nos modelos Angular 2?

155

Me deparei com uma sintaxe de atribuição estranha dentro de um modelo Angular 2.

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

Parece que let-cole let-car="rowData"crie duas novas variáveis cole carque poderão ser vinculadas ao interior do modelo.

Fonte: https://www.primefaces.org/primeng/#/datatable/templating

Como é let-*chamada essa sintaxe mágica ?

Como funciona?

Qual é a diferença entre let-somethinge let-something="something else"?

angular angular2-template primeng

— Steven Liekens
fonte

@NiekT. isto é diferente, * let- em angular 2 é variável modelo de escopo

— Sterling Archer

angular.io/docs/ts/latest/guide/… pesquise a palavra "let" (com um espaço) e vá para o 9º. Há uma boa explicação do que esta variável de template faz

— Sterling Archer

@SterlingArcher Obrigado pela correção, sou bastante novo no JS e no Angular.

— Nodon Darkeye

Respostas:

152

atualizar Angular 5

ngOutletContext foi renomeado para ngTemplateOutletContext

Consulte também https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

original

Os modelos ( <template>ou <ng-template>desde a versão 4.x) são adicionados como visualizações incorporadas e passam por um contexto.

Com let-colo contexto, a propriedade $implicité disponibilizada como coldentro do modelo para ligações. Com let-foo="bar"o contexto, a propriedade baré disponibilizada como foo.

Por exemplo, se você adicionar um modelo

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

Veja também esta resposta e ViewContainerRef # createEmbeddedView .

*ngFortambém funciona dessa maneira. A sintaxe canônica torna isso mais óbvio

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

em que NgForadiciona o modelo como visão incorporada ao DOM para cada um itemde itemse acrescenta alguns valores ( item, index, odd) para o contexto.

Consulte também Usando $ implict para passar vários parâmetros

— Günter Zöchbauer
fonte

Obrigado por explicar ngOutletContext. Esse era o elo que faltava entre o que eu já sabia e as informações que não consegui encontrar na documentação.

— Steven Liekens 23/03

Eu não acho que seja chamado ngTemplateOutletContextcomo você sugeriu no lançamento do angular 5. Os documentos também não mencionam nada sobre isso ser preterido. angular.io/api/common/NgTemplateOutlet

— Jessy

5 ainda não foi lançado. Não tenho certeza do que os documentos mostram. O changelog não tem nada de novo sobre isso desde então.

— Günter Zöchbauer

Obrigado por esta resposta, há uma grande falta de documentação sobre o que a *sintaxe está fazendo.

— dook

Não deve ser o segundo ng-template (aquele com ngTemplateOutlet) realmente o ng-template. Talvez ng-container fosse melhor? Acho que ambos funcionarão, mas o ng-container é semanticamente mais correto. Ou eu estou errado?

— Ondrej Peterka

A microssintaxe Angular permite configurar uma diretiva em uma sequência compacta e amigável. O analisador microsyntax converte essa cadeia de caracteres em atributos no <ng-template>. A palavra-chave let declara uma variável de entrada do modelo que você faz referência no modelo.

— dontry
fonte