EmbeddedViewRefのコンテキスト変数の使用方法

Question

EmbeddedViewRefのcontext変数を使用する方法が少し不明です。 Angular 2のchangelogから収集したものから、context変数は、埋め込みビューでローカル変数を設定するメカニズムとしてsetLocalとgetLocalメソッドを置き換えます。この例のplunkerがhereを見つけることができます

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 {} 

：

setLocal使用this blog post、見て後、私は一緒に、次の最小限の例をつなぎ合わせています。リストがレンダリングされるとき、各リスト項目は空です。私はcontextを間違った方法で考えているのか、それとも不適切に設定していますか？もしそうなら、私に知らせてください。

Answer 1

あなたは変数を宣言し、それらにコンテキストのプロパティを割り当てる必要があります。

cannonical形式：

<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