Przekazywanie kontekstu do szablonu przez ngOutletContext w Angular2

Question

Mam komponent, do którego przekazuję szablon. Wewnątrz tego komponentu chciałbym przekazać kontekst, aby móc wyświetlać dane.

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

Teraz przy użyciu składnika wewnątrz innego składnika:

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

Więc w my-component ja przechodząc szablon, który jest obsługiwany w swojej klasie przez @ContentChild nazwą templ.

Następnie w szablonie my-component „s I m przechodzącą templ do ngTemplateOutlet i dodatkowo, ja przechodząc kontekst korzystania ngOutletContext który ma isVisible zestaw do true.

Powinniśmy zobaczyć na ekranie yes!, ale wydaje się, że kontekst nigdy nie jest przekazywany.

Moja wersja kątowa:

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

Answer 1

Po długim czasie udało mi się.

Przykład z jednej wartości:

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

Przykład z pętli:

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

Wynik:

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

Answer 2

Głowice górę ngOutletContext jest przestarzała i zmieniona na ngTemplateOutletContext.

Szukaj dziennik zmian dla "NgTemplateOutlet # ngTemplateOutletContext"

CHANGELOG