cargdev/angular
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ivy): properly insert views into ViewContainerRef injected by querying <ng-container> (#33816)

Browse Source 
When asking for a ViewContainerRef on <ng-container> we do reuse <ng-container> comment
node as a LContainer's anachor. Before this fix the act of re-using a <ng-container>'s
comment node would result in this comment node being re-appended to the DOM in the wrong
place. With the fix in this PR we make sure that re-using <ng-container>'s comment node
doesn't result in unwanted DOM manipulation (ng-gontainer's comment node is already part
of the DOM and doesn't have to be re-created / re-appended).

PR Close #33816
This commit is contained in:
Pawel Kozlowski
2019-11-14 11:36:11 +01:00
committed by Alex Rickabaugh
parent 5be23a309e
commit f136ddad0d
2 changed files with 54 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/core/src/render3/view_engine_compatibility.ts
View File

@ -330,25 +330,28 @@ export function createContainerRef(
let commentNode: RComment;
// If the host is an element container, the native host element is guaranteed to be a
// comment and we can reuse that comment as anchor element for the new LContainer.
// The comment node in question is already part of the DOM structure so we don't need to append
// it again.
if (hostTNode.type === TNodeType.ElementContainer) {
commentNode = unwrapRNode(slotValue) as RComment;
} else {
ngDevMode && ngDevMode.rendererCreateComment++;
commentNode = hostView[RENDERER].createComment(ngDevMode ? 'container' : '');
}
// A container can be created on the root (topmost / bootstrapped) component and in this case we
// can't use LTree to insert container's marker node (both parent of a comment node and the
// commend node itself is located outside of elements hold by LTree). In this specific case we
// use low-level DOM manipulation to insert container's marker (comment) node.
if (isRootView(hostView)) {
const renderer = hostView[RENDERER];
const hostNative = getNativeByTNode(hostTNode, hostView) !;
const parentOfHostNative = nativeParentNode(renderer, hostNative);
nativeInsertBefore(
renderer, parentOfHostNative !, commentNode, nativeNextSibling(renderer, hostNative));
} else {
appendChild(commentNode, hostTNode, hostView);
// A `ViewContainerRef` can be injected by the root (topmost / bootstrapped) component. In
// this case we can't use TView / TNode data structures to insert container's marker node
// (both a parent of a comment node and the comment node itself are not part of any view). In
// this specific case we use low-level DOM manipulation to insert container's marker (comment)
// node.
if (isRootView(hostView)) {
const renderer = hostView[RENDERER];
const hostNative = getNativeByTNode(hostTNode, hostView) !;
const parentOfHostNative = nativeParentNode(renderer, hostNative);
nativeInsertBefore(
renderer, parentOfHostNative !, commentNode, nativeNextSibling(renderer, hostNative));
} else {
appendChild(commentNode, hostTNode, hostView);
}
}
hostView[hostTNode.index] = lContainer =