2016-06-06 39 views
6

Così ho un componente con una <template>dati di alimentazione angular2 torna a `<template>` da `[ngTemplateOutlet]`

<some-component [data]="someArray"> 
    <template>foo<template> 
</some-component> 

e sta usando questo per entrare in possesso del modello

@ContentChild(TemplateRef) 
public tmpl: TemplateRef<any>; 

che viene quindi utilizzato nel suo modello come

<div *ngFor="let item of someArrayFromDataInput"> 
    <template [ngTemplateOutlet]="tmpl"></template> 
</div> 

ora mi piacerebbe essere un ble per stampare alcuni dati da item nel modello originale, fondamentalmente per essere in grado di fare questo

<some-component [data]="someArray"> 
    <template>foo {{ item }}<template> 
</some-component> 

è possibile in qualche modo?

risposta

11

Una volta che queste terre https://github.com/angular/angular/pull/9042 che funzionerà come questo

<div *ngFor="let item of someArrayFromDataInput"> 
    <template 
    [ngOutletContext]="{ 
     item: item 
    }" 
    [ngTemplateOutlet]="tmpl"></template> 
</div> 

+

<some-component [data]="someArray"> 
    <template let-item="item">foo {{ item }}<template> 
</some-component> 

// edit: atterrato

+1

C'è un modo per "automaticamente" mettere un 'let-item =" oggetto "' su un componente? o meglio ancora fare ciò che fa ngFor, ed espandere 'someDir =" pippo "' in 'let-foo =" elemento "' per l'aliasing corretto? – TDaver

0

aggiornamento angolare 5

ngOutletContext stato rinominato in ngTemplateOutletContext

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

originale

Sembra che si sta chiedendo per la stessa funzione richiesta in https://github.com/angular/angular/issues/8368 (NgTemplateOutlet)

Aggiornamento

Vedi How to repeat a piece of HTML multiple times without ngFor and without another @Component per lavorare esempi Plunker.

+0

sì, https://gitter.im/angular/angular? at = 575544a4e96484d0692fe9c0 – foxx

Problemi correlati