refactor(ivy): clean projection support (#23287)

PR Close #23287
This commit is contained in:
Marc Laval 2018-04-10 17:37:11 +02:00 committed by Igor Minar
parent 8555a3a3cd
commit c973830d9a
3 changed files with 114 additions and 106 deletions

View File

@ -1710,12 +1710,14 @@ export function projection(
} }
if (canInsertNativeNode(currentParent, currentView)) { if (canInsertNativeNode(currentParent, currentView)) {
ngDevMode && assertNodeType(currentParent, LNodeType.Element);
// process each node in the list of projected nodes: // process each node in the list of projected nodes:
let nodeToProject: LNode|null = node.data.head; let nodeToProject: LNode|null = node.data.head;
const lastNodeToProject = node.data.tail; const lastNodeToProject = node.data.tail;
while (nodeToProject) { while (nodeToProject) {
appendProjectedNode( appendProjectedNode(
nodeToProject as LTextNode | LElementNode | LContainerNode, currentParent, currentView); nodeToProject as LTextNode | LElementNode | LContainerNode, currentParent as LElementNode,
currentView);
nodeToProject = nodeToProject === lastNodeToProject ? null : nodeToProject.pNextOrParent; nodeToProject = nodeToProject === lastNodeToProject ? null : nodeToProject.pNextOrParent;
} }
} }

View File

@ -473,24 +473,24 @@ export function insertChild(node: LNode, currentView: LView): void {
* @param currentView Current LView * @param currentView Current LView
*/ */
export function appendProjectedNode( export function appendProjectedNode(
node: LElementNode | LTextNode | LContainerNode, currentParent: LViewNode | LElementNode, node: LElementNode | LTextNode | LContainerNode, currentParent: LElementNode,
currentView: LView): void { currentView: LView): void {
if (node.type !== LNodeType.Container) { if (node.type !== LNodeType.Container) {
appendChild(currentParent, (node as LElementNode | LTextNode).native, currentView); appendChild(currentParent, (node as LElementNode | LTextNode).native, currentView);
} else if (canInsertNativeNode(currentParent, currentView)) { } else {
// The node we are adding is a Container and we are adding it to Element which // The node we are adding is a Container and we are adding it to Element which
// is not a component (no more re-projection). // is not a component (no more re-projection).
// Alternatively a container is projected at the root of a component's template // Alternatively a container is projected at the root of a component's template
// and can't be re-projected (as not content of any component). // and can't be re-projected (as not content of any component).
// Assignee the final projection location in those cases. // Assignee the final projection location in those cases.
const lContainer = (node as LContainerNode).data; const lContainer = (node as LContainerNode).data;
lContainer.renderParent = currentParent as LElementNode; lContainer.renderParent = currentParent;
const views = lContainer.views; const views = lContainer.views;
for (let i = 0; i < views.length; i++) { for (let i = 0; i < views.length; i++) {
addRemoveViewFromContainer(node as LContainerNode, views[i], true, null); addRemoveViewFromContainer(node as LContainerNode, views[i], true, null);
} }
} }
if (node.dynamicLContainerNode) { if (node.dynamicLContainerNode) {
node.dynamicLContainerNode.data.renderParent = currentParent as LElementNode; node.dynamicLContainerNode.data.renderParent = currentParent;
} }
} }

View File

@ -28,6 +28,8 @@ describe('ViewContainerRef', () => {
tplRef: TemplateRef<{}>; tplRef: TemplateRef<{}>;
// injecting a ViewContainerRef to create a dynamic container in which embedded views will be
// created
constructor(public vcref: ViewContainerRef) {} constructor(public vcref: ViewContainerRef) {}
} }
@ -521,6 +523,7 @@ describe('ViewContainerRef', () => {
.toEqual('<child><div><header vcref="">blah</header><span>bar</span></div></child>'); .toEqual('<child><div><header vcref="">blah</header><span>bar</span></div></child>');
}); });
describe('with select', () => {
@Component({ @Component({
selector: 'child-with-selector', selector: 'child-with-selector',
template: ` template: `
@ -592,7 +595,8 @@ describe('ViewContainerRef', () => {
'<child-with-selector><first><header vcref="">blah</header><span>bar</span></first><second></second></child-with-selector>'); '<child-with-selector><first><header vcref="">blah</header><span>bar</span></first><second></second></child-with-selector>');
}); });
it('should not project the ViewContainerRef content, when the host does not match a selector', () => { it('should not project the ViewContainerRef content, when the host does not match a selector',
() => {
@Component({ @Component({
selector: 'parent', selector: 'parent',
template: ` template: `
@ -629,11 +633,13 @@ describe('ViewContainerRef', () => {
.toEqual( .toEqual(
'<child-with-selector><first></first><second><footer vcref="">blah</footer></second></child-with-selector>'); '<child-with-selector><first></first><second><footer vcref="">blah</footer></second></child-with-selector>');
directiveInstance !.vcref.createEmbeddedView(directiveInstance !.tplRef, fixture.component); directiveInstance !.vcref.createEmbeddedView(
directiveInstance !.tplRef, fixture.component);
fixture.update(); fixture.update();
expect(fixture.html) expect(fixture.html)
.toEqual( .toEqual(
'<child-with-selector><first></first><second><footer vcref="">blah</footer><span>bar</span></second></child-with-selector>'); '<child-with-selector><first></first><second><footer vcref="">blah</footer><span>bar</span></second></child-with-selector>');
}); });
}); });
});
}); });