Question

我不确定如何使用EmbeddedViewRef的{{1}}变量。根据我从Angular 2的更改日志中收集的内容，context变量将context和setLocal方法替换为在嵌入视图中设置局部变量的机制。

在查看使用getLocal的{{3}}之后，我将以下最小的示例拼凑在一起：

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);
  }
}

可以找到此示例的plunker this blog post。列表呈现时，每个列表项都为空。我是以错误的方式考虑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 {}还是设置不正确？如果是的话，请告诉我。

Answer 1

您需要声明变量并为其指定上下文的属性：

cannonical form：

  <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

如何使用EmbeddedViewRef的上下文变量

1 个答案: