Che cos'è let- * nei modelli Angular 2?

156

Mi sono imbattuto in una strana sintassi del compito all'interno di un modello Angular 2.

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

Sembra che let-cole let-car="rowData"creare due nuove variabili cole carche possono quindi essere associati all'interno del modello.

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

Come si let-*chiama questa sintassi magica ?

Come funziona?

Qual è la differenza tra let-somethinge let-something="something else"?

angular angular2-template primeng

— Steven Liekens
fonte

@NiekT. questo è diverso, let- * in angolare 2 è ambito variabile modello

— Sterling Archer

angular.io/docs/ts/latest/guide/… cerca la parola "let" (con uno spazio) e vai intorno al nono. C'è una buona spiegazione di ciò che fa questa variabile modello

— Sterling Archer,

@SterlingArcher Grazie per la correzione, sono abbastanza nuovo per JS e Angular.

— Nodon Darkeye,

Risposte:

154

aggiorna Angular 5

ngOutletContext è stato rinominato in ngTemplateOutletContext

Vedi anche https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

originale

I modelli ( <template>o <ng-template>dal 4.x) vengono aggiunti come viste incorporate e vengono superati un contesto.

Con let-colla proprietà context $implicitviene resa disponibile come colall'interno del modello per i bind. Con let-foo="bar"la proprietà context barviene reso disponibile come foo.

Ad esempio se aggiungi un modello

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

Vedi anche questa risposta e ViewContainerRef # createEmbeddedView .

*ngForfunziona anche in questo modo. La sintassi canonica rende questo più ovvio

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

dove NgForaggiunge il modello come vista incorporata al DOM per ciascuna itemdi itemse aggiunge alcuni valori ( item, index, odd) al contesto.

Vedi anche Utilizzo di $ implict per passare più parametri

— Günter Zöchbauer
fonte

Grazie per aver spiegato ngOutletContext. Quello era l'anello mancante tra ciò che già sapevo e le informazioni che non riuscivo a trovare nella documentazione.

— Steven Liekens,

Non penso che sia chiamato ngTemplateOutletContextcome hai suggerito nel rilascio di Angular 5. I documenti non menzionano nulla sul fatto che sia deprecato. angular.io/api/common/NgTemplateOutlet

— Jessy

5 non è ancora stato rilasciato. Non sono sicuro di ciò che mostrano i documenti. Il log delle modifiche non ha nulla di nuovo da allora.

— Günter Zöchbauer,

Grazie per questa risposta, c'è una forte mancanza di documentazione su ciò che *sta facendo la sintassi.

— L'

Non dovrebbe essere il secondo ng-template (quello con ngTemplateOutlet) in realtà ng-template. Forse ng-container sarebbe meglio? Entrambi funzioneranno, immagino, ma il contenitore ng è semanticamente più corretto. O mi sbaglio?

— Ondrej Peterka,

La microsintassi angolare consente di configurare una direttiva in una stringa compatta e amichevole. Il parser di microsintassi converte quella stringa in attributi sul file <ng-template>. La parola chiave let dichiara una variabile di input del modello a cui fai riferimento all'interno del modello.

— dontry
fonte