什么是angular2中的可投影节点 [英] What are projectable nodes in angular2
问题描述
在阅读 ViewContainerRef 和 ComponentFactory ,其中,例如,我们有方法
On reading the documentation of ViewContainerRef and ComponentFactory, where , for example we have the method
ViewContainerRef#createComponent ,其中包含3个参数:componentFactory
,injector
和projectableNodes
.
ViewContainerRef#createComponent which takes 3 arguments : componentFactory
, injector
and projectableNodes
.
我尝试查找projectableNodes
的含义以及它们在博客,教程和源代码中的用法,但找不到太多.
I have tried looking up what projectableNodes
mean and how they are used in blogs, tutorials and source code but could not find much.
在查找 diff以获得ngComponentOutlet指令时,我可能会收集到projectableNodes中的字符串已投影"或呈现到创建的组件视图上(例如ng-content可能是).如果是这样,那会令人困惑,因为我们有 ViewContainerRef#createEmbeddedView 相同.
On looking up the diff for for ngComponentOutlet directive, All I could gather was that the string in projectableNodes is "projected" or rendered on to the created components view ( like ng-content may be). If so that is confusing as we have ViewContainerRef#createEmbeddedView for the same.
我想知道这些projectedNodes
是什么,并举例说明它们的用法.
I would like to know as to what are these projectedNodes
and have an example of their usage.
推荐答案
可投影节点是节点元素(即实现ng-content上.
Projectable nodes are the node elements ( i.e elements implementing the node interface ), which are "projected" or in other words, transcluded onto the ng-content
that we have in the template of our component.
例如,我们可以通过以下方式创建节点元素:
For example we can create a node element the following way :
var myNode = document.createElement('div');
var text = document.createTextNode('this is my text');
myNode.appendChild(text);
然后我们可以通过以下方式使用上述节点:
Then we can use the above node, the following way :
constructor(private vcr:ViewContainerRef ) {
}
ngAfterViewInit() {
let cmpFactory = this.vcr.resolveComponentFactory(MyDynamicComponent);
let injector = this.vcr.parentInjector;
var myNode = document.createElement('div');
var text = document.createTextNode('this is my text');
myNode.appendChild(text);
this.vcr.createComponent(cmpFactory,0,injector,[ [ myNode ] ])
}
投影节点可以使用二维数组,因为我们可以进行多槽包含,即多个ng-content
.
A two dimensional array is accepted for projected nodes as we can have multi-slot transclusion, that is more than one ng-content
.
这里是如何将可投影节点与ViewContainerRef#createComponent
一起使用的完整示例.此示例动态创建一个其中包含transclsion/ng-content的组件:
Here is a full example of how to use the projectable nodes with ViewContainerRef#createComponent
. This example dynamically creates a component that has transclsion/ng-content in it:
import { Component, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ComponentFactory,ComponentRef, Renderer } from '@angular/core';
@Component({
selector: 'sample',
template: '<ng-content></ng-content><ng-content></ng-content>'
})
export class Sample { }
@Component({
selector: 'demo',
template: '<p>Demo</p>',
entryComponents: [Sample]
})
export class DemoComponent {
constructor(private vcr: ViewContainerRef, private cfr: ComponentFactoryResolver, private r: Renderer) { }
ngAfterViewInit() {
let cmpFactory = this.cfr.resolveComponentFactory(Sample);
let injector = this.vcr.parentInjector;
let demoCompEl = this.vcr.element.nativeElement;
let projectedElA = this.r.createElement(demoCompEl,'p');
this.r.createText(projectedElA,'projectable content A');
this.r.detachView([projectedElA]);
let projectedElB = this.r.createElement(demoCompEl,'p');
this.r.createText(projectedElB,'projectable content B');
this.r.detachView([projectedElB]);
let projectedC = document.createElement('div');
let text = document.createTextNode('projectable content C');
projectedC.appendChild(text);
let cmpRef = this.vcr.createComponent(cmpFactory,0,injector,[[projectedElA],[projectedElB,projectedC]]);
}
}
输出:
Demo
projectable content A
projectable content B
projectable content C
要注意的另外一点是,在我们传递给可投影节点的2d数组中,每个1d数组条目都有一个特定视图的根元素,这些根元素属于/将在一个视图中一起呈现.单个ng-content
块
The additonal thing to notice is that in the 2d array that we pass for projectable nodes, each 1d array entry has the root elements of a particular view that belong together/ will be rendered together in a single ng-content
block
这篇关于什么是angular2中的可投影节点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!