Передача контекста шаблону через ngOutletContext в Angular2

Question

У меня есть компонент, которому я передаю шаблон. Внутри этого компонента я хотел бы передать контекст, чтобы я мог отображать данные.

@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> 
     {{isVisible ? 'yes!' : 'no'}} 
    </template> 
</my-component> 

Так my-component я передаю шаблон, который обрабатывается в своем классе по @ContentChild с именем templ.

Затем в шаблоне my-component «s я передаю templ к ngTemplateOutlet и, кроме того, я передаю контекст использования ngOutletContext который имеет isVisible набор для true.

мы должны видеть на экране yes!, но, похоже, контекст не передается.

Моя угловая версия:

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

Answer 1

После долгого времени, я сделал это.

Пример с одним значением:

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

Пример с петлей:

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

Результат:

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

Answer 2

головки вверх ngOutletContext устарела и переименована в ngTemplateOutletContext.

Поиск журнала изменений для "# NgTemplateOutlet ngTemplateOutletContext"

CHANGELOG