fix(ivy): support ng-container inside another ng-container (#25346)

PR Close #25346
This commit is contained in:
Pawel Kozlowski 2018-08-06 17:46:49 +02:00 committed by Kara Erickson
parent fefc860f35
commit dbdbbdbe86
2 changed files with 117 additions and 2 deletions

View File

@ -145,7 +145,7 @@ function walkLNodeTree(
nextNode = head ? (componentHost.data as LViewData)[PARENT] ![head.index] : null;
} else {
// Otherwise look at the first child
nextNode = getChildLNode(node as LViewNode);
nextNode = getChildLNode(node as LViewNode | LElementContainerNode);
}
if (nextNode === null) {
@ -532,6 +532,16 @@ function canInsertNativeChildOfElement(parent: LElementNode, currentView: LViewD
return false;
}
/**
* We might delay insertion of children for a given view if it is disconnected.
* This might happen for 2 main reason:
* - view is not inserted into any container (view was created but not iserted yet)
* - view is inserted into a container but the container itself is not inserted into the DOM
* (container might be part of projection or child of a view that is not inserted yet).
*
* In other words we can insert children of a given view this view was inserted into a container and
* the container itself has it render parent determined.
*/
function canInsertNativeChildOfView(parent: LViewNode): boolean {
ngDevMode && assertNodeType(parent, TNodeType.View);
@ -635,7 +645,10 @@ export function appendChild(parent: LNode, child: RNode | null, currentView: LVi
nativeInsertBefore(renderer, renderParent !.native, child, beforeNode);
} else if (parent.tNode.type === TNodeType.ElementContainer) {
const beforeNode = parent.native;
const grandParent = getParentLNode(parent) as LElementNode | LViewNode;
let grandParent = getParentLNode(parent as LElementContainerNode);
while (grandParent.tNode.type === TNodeType.ElementContainer) {
grandParent = getParentLNode(grandParent as LElementContainerNode);
}
if (grandParent.tNode.type === TNodeType.View) {
const renderParent = getRenderParent(grandParent as LViewNode);
nativeInsertBefore(renderer, renderParent !.native, child, beforeNode);

View File

@ -651,6 +651,108 @@ describe('render3 integration test', () => {
expect(fixture.html).toEqual('<test-cmpt>component template</test-cmpt>');
});
it('should render inside another ng-container', () => {
/**
* <ng-container>
* <ng-container>
* <ng-container>
* content
* </ng-container>
* </ng-container>
* </ng-container>
*/
const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
if (rf & RenderFlags.Create) {
elementContainerStart(0);
{
elementContainerStart(1);
{
elementContainerStart(2);
{ text(3, 'content'); }
elementContainerEnd();
}
elementContainerEnd();
}
elementContainerEnd();
}
});
function App() { element(0, 'test-cmpt'); }
const fixture = new TemplateFixture(App, () => {}, [TestCmpt]);
expect(fixture.html).toEqual('<test-cmpt>content</test-cmpt>');
});
it('should render inside another ng-container at the root of a delayed view', () => {
class TestDirective {
constructor(private _tplRef: TemplateRef<any>, private _vcRef: ViewContainerRef) {}
createAndInsert() { this._vcRef.insert(this._tplRef.createEmbeddedView({})); }
clear() { this._vcRef.clear(); }
static ngDirectiveDef = defineDirective({
type: TestDirective,
selectors: [['', 'testDirective', '']],
factory: () => new TestDirective(injectTemplateRef(), injectViewContainerRef()),
});
}
let testDirective: TestDirective;
function embeddedTemplate(rf: RenderFlags, ctx: any) {
if (rf & RenderFlags.Create) {
elementContainerStart(0);
{
elementContainerStart(1);
{
elementContainerStart(2);
{ text(3, 'content'); }
elementContainerEnd();
}
elementContainerEnd();
}
elementContainerEnd();
}
}
`<ng-template testDirective>
<ng-container>
<ng-container>
<ng-container>
content
</ng-container>
</ng-container>
</ng-container>
</ng-template>`;
const TestCmpt = createComponent('test-cmpt', function(rf: RenderFlags) {
if (rf & RenderFlags.Create) {
container(0, embeddedTemplate, null, [AttributeMarker.SelectOnly, 'testDirective']);
}
if (rf & RenderFlags.Update) {
testDirective = loadDirective<TestDirective>(0);
}
}, [TestDirective]);
function App() { element(0, 'test-cmpt'); }
const fixture = new ComponentFixture(TestCmpt);
expect(fixture.html).toEqual('');
testDirective !.createAndInsert();
fixture.update();
expect(fixture.html).toEqual('content');
testDirective !.createAndInsert();
fixture.update();
expect(fixture.html).toEqual('contentcontent');
testDirective !.clear();
fixture.update();
expect(fixture.html).toEqual('');
});
it('should support directives and inject ElementRef', () => {
class Directive {