如何使用 EmbeddedViewRef 的上下文变量 [英] How to use an EmbeddedViewRef's context variable
问题描述
我有点不确定如何使用 EmbeddedViewRef 的 context 变量.从我从 Angular 2 的更新日志中收集的信息来看，context 变量取代了 setLocal 和 getLocal 方法作为在嵌入式视图中设置局部变量的机制.
看了这篇博文后，它使用了 setLocal，我拼凑了以下最小的例子:
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'导出类 FooTemplateContext {构造函数(公共栏:字符串，公共巴兹:字符串，公共 qux:字符串){}}@指示({选择器:'[foo]'})出口类 Foo {构造函数(viewContainerRef:ViewContainerRef，templateRef:TemplateRef<FooTemplateContext>){let context = new FooTemplateContext('bar', 'baz', 'qux');让视图 = viewContainerRef.createEmbeddedView(templateRef, context);}}<小时>
从@angular/core"导入 {Component, NgModule}从@angular/platform-browser"导入 {BrowserModule}从 './foo.directive' 导入 { Foo }@成分({选择器:'我的应用'，模板:`<div><div *foo><ul><li>{{bar}}</li><li>{{baz}}</li><li>{{qux}}</li>`，指令:[Foo]})出口类应用{构造函数(){}}@NgModule({进口:[浏览器模块]，声明:[应用程序]，引导程序:[应用程序]})导出类 AppModule {}
可以在此处找到此示例的 plunker.当列表呈现时，每个列表项都是空的.我是否以错误的方式考虑了 context 或设置不当?如果是这样，请告诉我.
您需要声明变量并为其分配上下文的属性:
规范形式:
简写:
<ul><li>{{bar}}</li><li>{{baz}}</li><li>{{qux}}</li>I am a little unsure how to use the EmbeddedViewRef's context variable. From what I gather from Angular 2's changelog, the context variable replaces the setLocal and getLocal methods as the mechanism for setting local variables in an embedded view.
After looking at this blog post, which uses setLocal, I have pieced together the following minimal example:
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 {}
A plunker for this example can be found here. When the list renders, each of the list items are empty. Am I thinking of the context in the wrong way or setting it improperly? If so, please let me know.
You need to declare variables and assign properties of the context to them:
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>
short form:
<div *foo="let bar=bar let baz=baz let qux=qux">
<ul>
<li>{{bar}}</li>
<li>{{baz}}</li>
<li>{{qux}}</li>
</ul>
</div>
See also ng-content select bound variable
这篇关于如何使用 EmbeddedViewRef 的上下文变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
