Как использовать переменную контекста EmbeddedViewRef

Question

Я немного не уверен, как использовать переменную context. Из того, что я собираю из журнала изменений Angular 2, переменная context заменяет методы setLocal и getLocal как механизм для установки локальных переменных во встроенном виде.

После просмотра this blog post, который использует setLocal, я кусочки следующего минимальный пример:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core' 

export class FooTemplateContext { 
    constructor(public bar: string, public baz: string, public qux: string) {} 
} 

@Directive({ 
    selector: '[foo]' 
}) 
export class Foo { 
    constructor(viewContainerRef: ViewContainerRef, templateRef: TemplateRef<FooTemplateContext>) { 
    let context = new FooTemplateContext('bar', 'baz', 'qux'); 
    let view = viewContainerRef.createEmbeddedView(templateRef, context); 
    } 
} 

---

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

import { Foo } from './foo.directive' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div *foo> 
     <ul> 
      <li>{{bar}}</li> 
      <li>{{baz}}</li> 
      <li>{{qux}}</li> 
     </ul> 
     </div> 
    </div> 
    `, 
    directives: [Foo] 
}) 
export class App { 
    constructor() {} 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

plunker для этого примера можно найти here. Когда список отображает, каждый из элементов списка пуст. Я думаю о context не в том или ином порядке? Если это так, пожалуйста, дайте мне знать.

Answer 1

Вы должны объявить переменные и присвоить свойства контекста к ним:

канонических форм:

<template foo let-bar="bar" let-baz="baz" let-qux="qux" > 
    <ul> 
     <li>{{bar}}</li> 
     <li>{{baz}}</li> 
     <li>{{qux}}</li> 
    </ul> 
    </template> 

короткая форма:

<div *foo="let bar=bar let baz=baz let qux=qux"> 
    <ul> 
     <li>{{bar}}</li> 
     <li>{{baz}}</li> 
     <li>{{qux}}</li> 
    </ul> 
    </div> 

Plunker example

Смотрите также ng-content select bound variable