feat(ivy): support queries with views inserted through ViewContainerRef (#24179)
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
Victor Berchet
parent
855d9c00e0
commit
1cd9e6c2eb
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,17 @@
|
|||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {NgForOfContext} from '@angular/common';
|
||||
|
||||
import {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF} from '../../src/render3/di';
|
||||
import {QueryList, defineComponent, detectChanges} from '../../src/render3/index';
|
||||
import {container, containerRefreshEnd, containerRefreshStart, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, load, loadDirective} from '../../src/render3/instructions';
|
||||
import {bind, container, containerRefreshEnd, containerRefreshStart, elementEnd, elementProperty, elementStart, embeddedViewEnd, embeddedViewStart, load, loadDirective} from '../../src/render3/instructions';
|
||||
import {RenderFlags} from '../../src/render3/interfaces/definition';
|
||||
import {query, queryRefresh} from '../../src/render3/query';
|
||||
|
||||
import {createComponent, createDirective, renderComponent} from './render_util';
|
||||
|
||||
import {NgForOf, NgIf} from './common_with_def';
|
||||
import {ComponentFixture, createComponent, createDirective, renderComponent} from './render_util';
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -685,307 +688,406 @@ describe('query', () => {
|
|||
|
||||
describe('view boundaries', () => {
|
||||
|
||||
it('should report results in embedded views', () => {
|
||||
let firstEl;
|
||||
/**
|
||||
* <ng-template [ngIf]="exp">
|
||||
* <div #foo></div>
|
||||
* </ng-template>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
container(1);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(1);
|
||||
{
|
||||
if (ctx.exp) {
|
||||
let rf1 = embeddedViewStart(1);
|
||||
{
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
firstEl = elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
describe('ViewContainerRef', () => {
|
||||
|
||||
it('should report results in views inserted / removed by ngIf', () => {
|
||||
|
||||
/**
|
||||
* <ng-template [ngIf]="value">
|
||||
* <div #foo></div>
|
||||
* </ng-template>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
container(1, (rf1: RenderFlags, ctx1: any) => {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
}, null, ['ngIf', '']);
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
elementProperty(1, 'ngIf', bind(ctx.value));
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
}, [NgIf]);
|
||||
|
||||
const fixture = new ComponentFixture(Cmpt);
|
||||
const qList = fixture.component.query;
|
||||
expect(qList.length).toBe(0);
|
||||
|
||||
fixture.component.value = true;
|
||||
fixture.update();
|
||||
expect(qList.length).toBe(1);
|
||||
|
||||
fixture.component.value = false;
|
||||
fixture.update();
|
||||
expect(qList.length).toBe(0);
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const qList = (cmptInstance.query as any);
|
||||
expect(qList.length).toBe(0);
|
||||
it('should report results in views inserted / removed by ngFor', () => {
|
||||
|
||||
cmptInstance.exp = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(1);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
/**
|
||||
* <ng-template ngFor let-item [ngForOf]="value">
|
||||
* <div #foo [id]="item"></div>
|
||||
* </ng-template>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
container(1, (rf1: RenderFlags, row: NgForOfContext<string>) => {
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
if (rf1 & RenderFlags.Update) {
|
||||
elementProperty(0, 'id', bind(row.$implicit));
|
||||
}
|
||||
}, null, ['ngForOf', '']);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
elementProperty(1, 'ngForOf', bind(ctx.value));
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
}, [NgForOf]);
|
||||
|
||||
const fixture = new ComponentFixture(Cmpt);
|
||||
const qList = fixture.component.query;
|
||||
expect(qList.length).toBe(0);
|
||||
|
||||
fixture.component.value = ['a', 'b', 'c'];
|
||||
fixture.update();
|
||||
fixture
|
||||
.update(); // invoking CD twice due to https://github.com/angular/angular/issues/23707
|
||||
expect(qList.length).toBe(3);
|
||||
|
||||
fixture.component.value.splice(1, 1); // remove "b"
|
||||
fixture.update();
|
||||
fixture
|
||||
.update(); // invoking CD twice due to https://github.com/angular/angular/issues/23707
|
||||
expect(qList.length).toBe(2);
|
||||
|
||||
// make sure that a proper element was removed from query results
|
||||
expect(qList.first.nativeElement.id).toBe('a');
|
||||
expect(qList.last.nativeElement.id).toBe('c');
|
||||
|
||||
});
|
||||
|
||||
cmptInstance.exp = false;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should add results from embedded views in the correct order - views and elements mix',
|
||||
() => {
|
||||
let firstEl, lastEl, viewEl;
|
||||
/**
|
||||
* <span #foo></span>
|
||||
* <ng-template [ngIf]="exp">
|
||||
* <div #foo></div>
|
||||
* </ng-template>
|
||||
* <span #foo></span>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
firstEl = elementStart(1, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
container(3);
|
||||
lastEl = elementStart(4, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(3);
|
||||
{
|
||||
if (ctx.exp) {
|
||||
let rf1 = embeddedViewStart(1);
|
||||
{
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
viewEl = elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
describe('JS blocks', () => {
|
||||
|
||||
it('should report results in embedded views', () => {
|
||||
let firstEl;
|
||||
/**
|
||||
* % if (exp) {
|
||||
* <div #foo></div>
|
||||
* % }
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
container(1);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(1);
|
||||
{
|
||||
if (ctx.exp) {
|
||||
let rf1 = embeddedViewStart(1);
|
||||
{
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
firstEl = elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const qList = (cmptInstance.query as any);
|
||||
expect(qList.length).toBe(0);
|
||||
|
||||
cmptInstance.exp = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(1);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
|
||||
cmptInstance.exp = false;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(0);
|
||||
});
|
||||
|
||||
it('should add results from embedded views in the correct order - views and elements mix',
|
||||
() => {
|
||||
let firstEl, lastEl, viewEl;
|
||||
/**
|
||||
* <span #foo></span>
|
||||
* % if (exp) {
|
||||
* <div #foo></div>
|
||||
* % }
|
||||
* <span #foo></span>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
firstEl = elementStart(1, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
container(3);
|
||||
lastEl = elementStart(4, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(3);
|
||||
{
|
||||
if (ctx.exp) {
|
||||
let rf1 = embeddedViewStart(1);
|
||||
{
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
viewEl = elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const qList = (cmptInstance.query as any);
|
||||
expect(qList.length).toBe(2);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
|
||||
cmptInstance.exp = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(3);
|
||||
expect(qList.toArray()[0].nativeElement).toBe(firstEl);
|
||||
expect(qList.toArray()[1].nativeElement).toBe(viewEl);
|
||||
expect(qList.toArray()[2].nativeElement).toBe(lastEl);
|
||||
|
||||
cmptInstance.exp = false;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(2);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const qList = (cmptInstance.query as any);
|
||||
expect(qList.length).toBe(2);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
|
||||
cmptInstance.exp = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(3);
|
||||
expect(qList.toArray()[0].nativeElement).toBe(firstEl);
|
||||
expect(qList.toArray()[1].nativeElement).toBe(viewEl);
|
||||
expect(qList.toArray()[2].nativeElement).toBe(lastEl);
|
||||
|
||||
cmptInstance.exp = false;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(2);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
});
|
||||
|
||||
it('should add results from embedded views in the correct order - views side by side', () => {
|
||||
let firstEl, lastEl;
|
||||
/**
|
||||
* <ng-template [ngIf]="exp1">
|
||||
* <div #foo></div>
|
||||
* </ng-template>
|
||||
* <ng-template [ngIf]="exp2">
|
||||
* <span #foo></span>
|
||||
* </ng-template>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
container(1);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(1);
|
||||
{
|
||||
if (ctx.exp1) {
|
||||
let rf0 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf0 & RenderFlags.Create) {
|
||||
firstEl = elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
if (ctx.exp2) {
|
||||
let rf1 = embeddedViewStart(1);
|
||||
{
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
lastEl = elementStart(0, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
it('should add results from embedded views in the correct order - views side by side', () => {
|
||||
let firstEl, lastEl;
|
||||
/**
|
||||
* % if (exp1) {
|
||||
* <div #foo></div>
|
||||
* % } if (exp2) {
|
||||
* <span #foo></span>
|
||||
* % }
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
container(1);
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const qList = (cmptInstance.query as any);
|
||||
expect(qList.length).toBe(0);
|
||||
|
||||
cmptInstance.exp2 = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(1);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
|
||||
cmptInstance.exp1 = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(2);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
});
|
||||
|
||||
it('should add results from embedded views in the correct order - nested views', () => {
|
||||
let firstEl, lastEl;
|
||||
/**
|
||||
* <ng-template [ngIf]="exp1">
|
||||
* <div #foo></div>
|
||||
* <ng-template [ngIf]="exp2">
|
||||
* <span #foo></span>
|
||||
* </ng-template>
|
||||
* </ng-template>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
container(1);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(1);
|
||||
{
|
||||
if (ctx.exp1) {
|
||||
let rf0 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf0 & RenderFlags.Create) {
|
||||
firstEl = elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
container(2);
|
||||
}
|
||||
if (rf0 & RenderFlags.Update) {
|
||||
containerRefreshStart(2);
|
||||
{
|
||||
if (ctx.exp2) {
|
||||
let rf2 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf2) {
|
||||
lastEl = elementStart(0, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(1);
|
||||
{
|
||||
if (ctx.exp1) {
|
||||
let rf0 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf0 & RenderFlags.Create) {
|
||||
firstEl = elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
containerRefreshEnd();
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
if (ctx.exp2) {
|
||||
let rf1 = embeddedViewStart(1);
|
||||
{
|
||||
if (rf1 & RenderFlags.Create) {
|
||||
lastEl = elementStart(0, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const qList = (cmptInstance.query as any);
|
||||
expect(qList.length).toBe(0);
|
||||
|
||||
cmptInstance.exp2 = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(1);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
|
||||
cmptInstance.exp1 = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(2);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const qList = (cmptInstance.query as any);
|
||||
expect(qList.length).toBe(0);
|
||||
|
||||
cmptInstance.exp1 = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(1);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
|
||||
cmptInstance.exp2 = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(2);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
});
|
||||
|
||||
it('should support combination of deep and shallow queries', () => {
|
||||
/**
|
||||
* <ng-template [ngIf]="exp">
|
||||
* <div #foo></div>
|
||||
* </ng-template>
|
||||
* <span #foo></span>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
query(1, ['foo'], false, QUERY_READ_FROM_NODE);
|
||||
container(2);
|
||||
elementStart(3, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(2);
|
||||
{
|
||||
if (ctx.exp) {
|
||||
let rf0 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf0 & RenderFlags.Create) {
|
||||
elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
it('should add results from embedded views in the correct order - nested views', () => {
|
||||
let firstEl, lastEl;
|
||||
/**
|
||||
* % if (exp1) {
|
||||
* <div #foo></div>
|
||||
* % if (exp2) {
|
||||
* <span #foo></span>
|
||||
* }
|
||||
* % }
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
container(1);
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.deep = tmp as QueryList<any>);
|
||||
queryRefresh(tmp = load<QueryList<any>>(1)) && (ctx.shallow = tmp as QueryList<any>);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(1);
|
||||
{
|
||||
if (ctx.exp1) {
|
||||
let rf0 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf0 & RenderFlags.Create) {
|
||||
firstEl = elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
container(2);
|
||||
}
|
||||
if (rf0 & RenderFlags.Update) {
|
||||
containerRefreshStart(2);
|
||||
{
|
||||
if (ctx.exp2) {
|
||||
let rf2 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf2) {
|
||||
lastEl = elementStart(0, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
}
|
||||
containerRefreshEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.query = tmp as QueryList<any>);
|
||||
}
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const qList = (cmptInstance.query as any);
|
||||
expect(qList.length).toBe(0);
|
||||
|
||||
cmptInstance.exp1 = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(1);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
|
||||
cmptInstance.exp2 = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(qList.length).toBe(2);
|
||||
expect(qList.first.nativeElement).toBe(firstEl);
|
||||
expect(qList.last.nativeElement).toBe(lastEl);
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const deep = (cmptInstance.deep as any);
|
||||
const shallow = (cmptInstance.shallow as any);
|
||||
expect(deep.length).toBe(1);
|
||||
expect(shallow.length).toBe(1);
|
||||
it('should support combination of deep and shallow queries', () => {
|
||||
/**
|
||||
* <ng-template [ngIf]="exp">
|
||||
* <div #foo></div>
|
||||
* </ng-template>
|
||||
* <span #foo></span>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo') query;
|
||||
* }
|
||||
*/
|
||||
const Cmpt = createComponent('cmpt', function(rf: RenderFlags, ctx: any) {
|
||||
let tmp: any;
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo'], true, QUERY_READ_FROM_NODE);
|
||||
query(1, ['foo'], false, QUERY_READ_FROM_NODE);
|
||||
container(2);
|
||||
elementStart(3, 'span', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
containerRefreshStart(2);
|
||||
{
|
||||
if (ctx.exp) {
|
||||
let rf0 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf0 & RenderFlags.Create) {
|
||||
elementStart(0, 'div', null, ['foo', '']);
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
}
|
||||
}
|
||||
containerRefreshEnd();
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.deep = tmp as QueryList<any>);
|
||||
queryRefresh(tmp = load<QueryList<any>>(1)) && (ctx.shallow = tmp as QueryList<any>);
|
||||
}
|
||||
});
|
||||
|
||||
const cmptInstance = renderComponent(Cmpt);
|
||||
const deep = (cmptInstance.deep as any);
|
||||
const shallow = (cmptInstance.shallow as any);
|
||||
expect(deep.length).toBe(1);
|
||||
expect(shallow.length).toBe(1);
|
||||
|
||||
|
||||
cmptInstance.exp = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(deep.length).toBe(2);
|
||||
expect(shallow.length).toBe(1);
|
||||
cmptInstance.exp = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(deep.length).toBe(2);
|
||||
expect(shallow.length).toBe(1);
|
||||
|
||||
cmptInstance.exp = false;
|
||||
detectChanges(cmptInstance);
|
||||
expect(deep.length).toBe(1);
|
||||
expect(shallow.length).toBe(1);
|
||||
});
|
||||
|
||||
cmptInstance.exp = false;
|
||||
detectChanges(cmptInstance);
|
||||
expect(deep.length).toBe(1);
|
||||
expect(shallow.length).toBe(1);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue