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

feat(ivy): support queries with views inserted through ViewContainerRef (#24179)

Browse Source 
This PR tackles a simple case where ViewRef definition point (<ng-template>) is the
same as the insertion point (ViewContainerRef requested on the said <ng-template>).
For this particular case we can assume that we know a container into which a given
view will be inserted when a view is created. This is not true fall all the possible
cases so follow-up PR will be needed to extend this basic implementation.

PR Close #24179
This commit is contained in:
Pawel Kozlowski
2018-05-28 11:57:36 +02:00
committed by Victor Berchet
parent 855d9c00e0
commit 1cd9e6c2eb
6 changed files with 460 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/core/src/render3/di.ts
View File

@ -20,10 +20,10 @@ import {Type} from '../type';
import {assertGreaterThan, assertLessThan, assertNotNull} from './assert';
import {addToViewTree, assertPreviousIsParent, createLContainer, createLNodeObject, createTNode, createTView, getDirectiveInstance, getPreviousOrParentNode, getRenderer, isComponent, renderEmbeddedTemplate, resolveDirective} from './instructions';
import {ComponentTemplate, DirectiveDef, DirectiveDefList, PipeDefList} from './interfaces/definition';
import {ComponentTemplate, DirectiveDef} from './interfaces/definition';
import {LInjector} from './interfaces/injector';
import {AttributeMarker, LContainerNode, LElementNode, LNode, LViewNode, TNodeFlags, TNodeType} from './interfaces/node';
import {QueryReadType} from './interfaces/query';
import {LQueries, QueryReadType} from './interfaces/query';
import {Renderer3} from './interfaces/renderer';
import {LView, TView} from './interfaces/view';
import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
@ -576,6 +576,11 @@ export function getOrCreateContainerRef(di: LInjector): viewEngine_ViewContainer
const lContainerNode: LContainerNode = createLNodeObject(
TNodeType.Container, vcRefHost.view, hostParent, undefined, lContainer, null);
if (vcRefHost.queries) {
lContainerNode.queries = vcRefHost.queries.container();
}
const hostTNode = vcRefHost.tNode;
if (!hostTNode.dynamicContainerNode) {
hostTNode.dynamicContainerNode =
@ -701,7 +706,7 @@ export function getOrCreateTemplateRef<T>(di: LInjector): viewEngine_TemplateRef
ngDevMode && assertNotNull(hostTNode.tViews, 'TView must be allocated');
di.templateRef = new TemplateRef<any>(
getOrCreateElementRef(di), hostTNode.tViews as TView, hostNode.data.template !,
getRenderer(), hostTView.directiveRegistry, hostTView.pipeRegistry);
getRenderer(), hostNode.queries);
}
return di.templateRef;
}
@ -712,13 +717,13 @@ class TemplateRef<T> implements viewEngine_TemplateRef<T> {
constructor(
elementRef: viewEngine_ElementRef, private _tView: TView,
private _template: ComponentTemplate<T>, private _renderer: Renderer3,
private _directives: DirectiveDefList|null, private _pipes: PipeDefList|null) {
private _queries: LQueries|null) {
this.elementRef = elementRef;
}
createEmbeddedView(context: T): viewEngine_EmbeddedViewRef<T> {
const viewNode = renderEmbeddedTemplate(
null, this._tView, this._template, context, this._renderer, this._directives, this._pipes);
null, this._tView, this._template, context, this._renderer, this._queries);
return addDestroyable(new EmbeddedViewRef(viewNode, this._template, context));
}
}

10
packages/core/src/render3/instructions.ts
View File

@ -493,8 +493,7 @@ export function renderTemplate<T>(
*/
export function renderEmbeddedTemplate<T>(
viewNode: LViewNode | null, tView: TView, template: ComponentTemplate<T>, context: T,
renderer: Renderer3, directives?: DirectiveDefList | null,
pipes?: PipeDefList | null): LViewNode {
renderer: Renderer3, queries?: LQueries | null): LViewNode {
const _isParent = isParent;
const _previousOrParentNode = previousOrParentNode;
let oldView: LView;
@ -507,6 +506,10 @@ export function renderEmbeddedTemplate<T>(
const lView = createLView(
-1, renderer, tView, template, context, LViewFlags.CheckAlways, getCurrentSanitizer());
if (queries) {
lView.queries = queries.createView();
}
viewNode = createLNode(null, TNodeType.View, null, null, null, lView);
rf = RenderFlags.Create;
}
@ -1643,8 +1646,9 @@ export function embeddedViewStart(viewBlockId: number): RenderFlags {
const newView = createLView(
viewBlockId, renderer, getOrCreateEmbeddedTView(viewBlockId, container), null, null,
LViewFlags.CheckAlways, getCurrentSanitizer());
if (lContainer.queries) {
newView.queries = lContainer.queries.enterView(lContainer.nextIndex !);
newView.queries = lContainer.queries.createView();
}
enterView(

18
packages/core/src/render3/interfaces/query.ts
View File

@ -28,19 +28,25 @@ export interface LQueries {
addNode(node: LNode): void;
/**
* Notify `LQueries` that a `LNode` has been created and needs to be added to query results
* if matching query predicate.
* Notify `LQueries` that a new LContainer was added to ivy data structures. As a result we need
* to prepare room for views that might be inserted into this container.
*/
container(): LQueries|null;
/**
* Notify `LQueries` that a new view was created and is being entered in the creation mode.
* This allow queries to prepare space for matching nodes from views.
* Notify `LQueries` that a new `LView` has been created. As a result we need to prepare room
* and collect nodes that match query predicate.
*/
enterView(newViewIndex: number): LQueries|null;
createView(): LQueries|null;
/**
* Notify `LQueries` that an `LViewNode` has been removed from `LContainerNode`. As a result all
* Notify `LQueries` that a new `LView` has been added to `LContainer`. As a result all
* the matching nodes from this view should be added to container's queries.
*/
insertView(newViewIndex: number): void;
/**
* Notify `LQueries` that an `LView` has been removed from `LContainer`. As a result all
* the matching nodes from this view should be removed from container's queries.
*/
removeView(removeIndex: number): void;

13
packages/core/src/render3/node_manipulation.ts
View File

@ -328,6 +328,12 @@ export function insertView(
viewNode.data.next = null;
}
// Notify query that a new view has been added
const lView = viewNode.data;
if (lView.queries) {
lView.queries.insertView(index);
}
// If the container's renderParent is null, we know that it is a root node of its own parent view
// and we should wait until that parent processes its nodes (otherwise, we will insert this view's
// nodes twice - once now and once when its parent inserts its views).
@ -367,8 +373,13 @@ export function removeView(container: LContainerNode, removeIndex: number): LVie
views.splice(removeIndex, 1);
destroyViewTree(viewNode.data);
addRemoveViewFromContainer(container, viewNode, false);
// Notify query that view has been removed
container.data.queries && container.data.queries.removeView(removeIndex);
const removedLview = viewNode.data;
if (removedLview.queries) {
removedLview.queries.removeView(removeIndex);
}
return viewNode;
}

47
packages/core/src/render3/query.ts
View File

@ -76,6 +76,12 @@ export interface LQuery<T> {
* This is what builds up the `QueryList._valuesTree`.
*/
values: any[];
/**
* A pointer to an array that stores collected values from views. This is necessary so we know a
* container into which to insert nodes collected from views.
*/
containerValues: any[]|null;
}
export class LQueries_ implements LQueries {
@ -118,8 +124,13 @@ export class LQueries_ implements LQueries {
while (query) {
const containerValues: any[] = []; // prepare room for views
query.values.push(containerValues);
const clonedQuery: LQuery<any> =
{next: null, list: query.list, predicate: query.predicate, values: containerValues};
const clonedQuery: LQuery<any> = {
next: null,
list: query.list,
predicate: query.predicate,
values: containerValues,
containerValues: null
};
clonedQuery.next = result;
result = clonedQuery;
query = query.next;
@ -128,15 +139,18 @@ export class LQueries_ implements LQueries {
return result ? new LQueries_(result) : null;
}
enterView(index: number): LQueries|null {
createView(): LQueries|null {
let result: LQuery<any>|null = null;
let query = this.deep;
while (query) {
const viewValues: any[] = []; // prepare room for view nodes
query.values.splice(index, 0, viewValues);
const clonedQuery: LQuery<any> =
{next: null, list: query.list, predicate: query.predicate, values: viewValues};
const clonedQuery: LQuery<any> = {
next: null,
list: query.list,
predicate: query.predicate,
values: [],
containerValues: query.values
};
clonedQuery.next = result;
result = clonedQuery;
query = query.next;
@ -145,6 +159,17 @@ export class LQueries_ implements LQueries {
return result ? new LQueries_(result) : null;
}
insertView(index: number): void {
let query = this.deep;
while (query) {
ngDevMode &&
assertNotNull(
query.containerValues, 'View queries need to have a pointer to container values.');
query.containerValues !.splice(index, 0, query.values);
query = query.next;
}
}
addNode(node: LNode): void {
add(this.shallow, node);
add(this.deep, node);
@ -153,7 +178,10 @@ export class LQueries_ implements LQueries {
removeView(index: number): void {
let query = this.deep;
while (query) {
const removed = query.values.splice(index, 1);
ngDevMode &&
assertNotNull(
query.containerValues, 'View queries need to have a pointer to container values.');
const removed = query.containerValues !.splice(index, 1);
// mark a query as dirty only when removed view had matching modes
ngDevMode && assertEqual(removed.length, 1, 'removed.length');
@ -279,7 +307,8 @@ function createQuery<T>(
next: previous,
list: queryList,
predicate: createPredicate(predicate, read),
values: (queryList as any as QueryList_<T>)._valuesTree
values: (queryList as any as QueryList_<T>)._valuesTree,
containerValues: null
};
}