Übergabe von Kontext an Vorlage über ngOutletContext in Angular2

Question

Ich habe eine Komponente, an die ich eine Vorlage übergebe. Innerhalb dieser Komponente möchte ich den Kontext übergeben, damit ich Daten anzeigen kann.

@Component({ 
    selector: 'my-component', 
    providers: [], 
    template: ` 
    <template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}"> 
    </template> 
    ` 
}) 
export class MyElementComponent implements OnInit { 
    @ContentChild(TemplateRef) templ; 
    constructor(){} 
} 

Wenn nun innerhalb von einer anderen Komponente mit Komponente:

<my-component> 
    <template> 
     {{isVisible ? 'yes!' : 'no'}} 
    </template> 
</my-component> 

So in my-component ich eine Vorlage bin vorbei, die templ von @ContentChild mit Namen in seiner Klasse behandelt wird.

Dann in my-component ‚s Vorlage i templ-ngTemplateOutlet und zusätzlich bin vorbei, ich bin Kontext vorbei ngOutletContext verwendet, die isVisible Set true hat.

wir sollten sehen yes! auf dem Bildschirm, aber es scheint, dass Kontext nie bestanden wird.

Meine abgewinkelte Ausführung:

"@angular/common": "^2.3.1", 
"@angular/compiler": "^2.3.1", 
"@angular/core": "^2.3.1", 

Answer 1

Nach langer Zeit habe ich es.

Beispiel mit Einzelwert:

@Component({ 
    selector: 'my-component', 
    providers: [], 
    template: ` 
    <template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}"> 
    </template> 
    ` 
}) 
export class MyElementComponent implements OnInit { 
    @ContentChild(TemplateRef) templ; 
    constructor(){} 
} 

<my-component> 
    <template let-isVisible="isVisible"> 
     {{isVisible ? 'yes!' : 'no'}} 
    </template> 
</my-component> 

Beispiel mit Schleife:

@Component({ 
    selector: 'my-component', 
    providers: [], 
    template: ` 
    <div *ngFor="let element of data"> 
     <template [ngTemplateOutlet]="templ" [ngOutletContext]="{element: element}"> 
     </template> 
    </div> 
    ` 
}) 
export class MyElementComponent implements OnInit { 
    @ContentChild(TemplateRef) templ; 
    constructor(){ 
     this.data = [{name:'John'}, {name:'Jacob'}]; 
    } 
} 

--- 

<my-component> 
    <template let-element="element"> 
     {{element.name}} 
    </template> 
</my-component> 

Ergebnis:

<div>John</div> 
<div>Jacob</div> 

Answer 2

Heads up ngOutletContext veraltet und als ngTemplateOutletContext umbenannt.

die Protokolländerung für "NgTemplateOutlet # ngTemplateOutletContext" das gleiche Problem

CHANGELOG