如何使用 EmbeddedViewRef 的上下文变量

Question

我有点不确定如何使用 EmbeddedViewRef 的 context 变量。根据我从 Angular 2 的更新日志中收集到的信息，context 变量取代了 setLocal 和 getLocal 方法作为在嵌入式视图中设置局部变量的机制。

在查看了使用 setLocal 的 this blog post 之后，我拼凑了以下最小示例：

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

可以找到此示例的插件 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

另见

如何使用 EmbeddedViewRef 的上下文变量

How to use an EmbeddedViewRef's context variable

angular2-directives

angular