refactor(ivy): queries should not rely on LNode (#25415)
PR Close #25415
This commit is contained in:
Kara Erickson
Ben Lesh
parent
209cc7e1b0
commit
2b128a47b9
|
|
@ -584,15 +584,10 @@ export function getOrCreateContainerRef(di: LInjector): viewEngine.ViewContainer
|
|||
const hostParent = getParentLNode(vcRefHost) !;
|
||||
const lContainer = createLContainer(hostParent, vcRefHost.view, true);
|
||||
const comment = vcRefHost.view[RENDERER].createComment(ngDevMode ? 'container' : '');
|
||||
const lContainerNode: LContainerNode = createLNodeObject(
|
||||
TNodeType.Container, vcRefHost.view, hostParent, comment, lContainer, null);
|
||||
const lContainerNode: LContainerNode =
|
||||
createLNodeObject(TNodeType.Container, vcRefHost.view, hostParent, comment, lContainer);
|
||||
appendChild(hostParent, comment, vcRefHost.view);
|
||||
|
||||
|
||||
if (vcRefHost.queries) {
|
||||
lContainerNode.queries = vcRefHost.queries.container();
|
||||
}
|
||||
|
||||
const hostTNode = vcRefHost.tNode as TElementNode | TContainerNode;
|
||||
if (!hostTNode.dynamicContainerNode) {
|
||||
hostTNode.dynamicContainerNode =
|
||||
|
|
|
|||
|
|
@ -175,12 +175,18 @@ let currentQueries: LQueries|null;
|
|||
* - when creating content queries (inb this previousOrParentNode points to a node on which we
|
||||
* create content queries).
|
||||
*/
|
||||
export function getCurrentQueries(QueryType: {new (): LQueries}): LQueries {
|
||||
// top level variables should not be exported for performance reasons (PERF_NOTES.md)
|
||||
return currentQueries ||
|
||||
(currentQueries =
|
||||
(previousOrParentNode.queries && previousOrParentNode.queries.clone() ||
|
||||
new QueryType()));
|
||||
export function getOrCreateCurrentQueries(
|
||||
QueryType: {new (parent: null, shallow: null, deep: null): LQueries}): LQueries {
|
||||
const tNode = previousOrParentNode.tNode;
|
||||
|
||||
// if this is the first content query on a node, any existing LQueries needs to be cloned
|
||||
// in subsequent template passes, the cloning occurs before directive instantiation.
|
||||
if (previousOrParentNode.data !== viewData && !isContentQueryHost(tNode)) {
|
||||
currentQueries && (currentQueries = currentQueries.clone());
|
||||
tNode.flags |= TNodeFlags.hasContentQuery;
|
||||
}
|
||||
|
||||
return currentQueries || (currentQueries = new QueryType(null, null, null));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -392,14 +398,13 @@ export function createLViewData<T>(
|
|||
*/
|
||||
export function createLNodeObject(
|
||||
type: TNodeType, currentView: LViewData, parent: LNode | null,
|
||||
native: RText | RElement | RComment | null, state: any,
|
||||
queries: LQueries | null): LElementNode<extNode&LViewNode&LContainerNode&LProjectionNode {
|
||||
native: RText | RElement | RComment | null,
|
||||
state: any): LElementNode<extNode&LViewNode&LContainerNode&LProjectionNode {
|
||||
return {
|
||||
native: native as any,
|
||||
view: currentView,
|
||||
nodeInjector: parent ? parent.nodeInjector : null,
|
||||
data: state,
|
||||
queries: queries,
|
||||
tNode: null !,
|
||||
dynamicLContainerNode: null
|
||||
};
|
||||
|
|
@ -442,12 +447,9 @@ export function createLNode(
|
|||
// so it's only set if the view is the same.
|
||||
const tParent =
|
||||
parent && parent.view === viewData ? parent.tNode as TElementNode | TContainerNode : null;
|
||||
let queries =
|
||||
(isParent ? currentQueries : previousOrParentNode && previousOrParentNode.queries) ||
|
||||
parent && parent.queries && parent.queries.child();
|
||||
|
||||
const isState = state != null;
|
||||
const node =
|
||||
createLNodeObject(type, viewData, parent, native, isState ? state as any : null, queries);
|
||||
const node = createLNodeObject(type, viewData, parent, native, isState ? state as any : null);
|
||||
|
||||
if (index === -1 || type === TNodeType.View) {
|
||||
// View nodes are not stored in data because they can be added / removed at runtime (which
|
||||
|
|
@ -477,7 +479,6 @@ export function createLNode(
|
|||
|
||||
// Now link ourselves into the tree.
|
||||
if (isParent) {
|
||||
currentQueries = null;
|
||||
if (previousOrParentNode.tNode.child == null && previousOrParentNode.view === viewData ||
|
||||
previousOrParentNode.tNode.type === TNodeType.View) {
|
||||
// We are in the same view, which means we are adding content node to the parent View.
|
||||
|
|
@ -747,8 +748,9 @@ export function elementContainerEnd(): void {
|
|||
}
|
||||
|
||||
ngDevMode && assertNodeType(previousOrParentNode, TNodeType.ElementContainer);
|
||||
const queries = previousOrParentNode.queries;
|
||||
queries && queries.addNode(previousOrParentNode);
|
||||
|
||||
currentQueries && (currentQueries = currentQueries.addNode(previousOrParentNode));
|
||||
|
||||
queueLifecycleHooks(previousOrParentNode.tNode.flags, tView);
|
||||
}
|
||||
|
||||
|
|
@ -907,6 +909,10 @@ export function initChangeDetectorIfExisting(
|
|||
}
|
||||
}
|
||||
|
||||
export function isContentQueryHost(tNode: TNode): boolean {
|
||||
return (tNode.flags & TNodeFlags.hasContentQuery) !== 0;
|
||||
}
|
||||
|
||||
export function isComponent(tNode: TNode): boolean {
|
||||
return (tNode.flags & TNodeFlags.isComponent) === TNodeFlags.isComponent;
|
||||
}
|
||||
|
|
@ -915,9 +921,16 @@ export function isComponent(tNode: TNode): boolean {
|
|||
* This function instantiates the given directives.
|
||||
*/
|
||||
function instantiateDirectivesDirectly() {
|
||||
ngDevMode && assertEqual(
|
||||
firstTemplatePass, false,
|
||||
`Directives should only be instantiated directly after first template pass`);
|
||||
const tNode = previousOrParentNode.tNode;
|
||||
const count = tNode.flags & TNodeFlags.DirectiveCountMask;
|
||||
|
||||
if (isContentQueryHost(tNode) && currentQueries) {
|
||||
currentQueries = currentQueries.clone();
|
||||
}
|
||||
|
||||
if (count > 0) {
|
||||
const start = tNode.flags >> TNodeFlags.DirectiveStartingIndexShift;
|
||||
const end = start + count;
|
||||
|
|
@ -1233,8 +1246,7 @@ export function elementEnd(): void {
|
|||
previousOrParentNode = getParentLNode(previousOrParentNode) as LElementNode;
|
||||
}
|
||||
ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Element);
|
||||
const queries = previousOrParentNode.queries;
|
||||
queries && queries.addNode(previousOrParentNode);
|
||||
currentQueries && (currentQueries = currentQueries.addNode(previousOrParentNode));
|
||||
queueLifecycleHooks(previousOrParentNode.tNode.flags, tView);
|
||||
currentElementNode = null;
|
||||
}
|
||||
|
|
@ -1853,17 +1865,17 @@ export function container(
|
|||
// because views can be removed and re-inserted.
|
||||
addToViewTree(viewData, index + HEADER_OFFSET, node.data);
|
||||
|
||||
const queries = node.queries;
|
||||
if (queries) {
|
||||
if (currentQueries) {
|
||||
// prepare place for matching nodes from views inserted into a given container
|
||||
lContainer[QUERIES] = queries.container();
|
||||
lContainer[QUERIES] = currentQueries.container();
|
||||
}
|
||||
|
||||
createDirectivesAndLocals(localRefs);
|
||||
|
||||
isParent = false;
|
||||
ngDevMode && assertNodeType(previousOrParentNode, TNodeType.Container);
|
||||
queries && queries.addNode(node); // check if a given container node matches
|
||||
// check if a given container node matches
|
||||
currentQueries && (currentQueries = currentQueries.addNode(node));
|
||||
queueLifecycleHooks(node.tNode.flags, tView);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,8 +42,11 @@ export const enum TNodeFlags {
|
|||
/** This bit is set if the node has been projected */
|
||||
isProjected = 0b00000000000000000010000000000000,
|
||||
|
||||
/** This bit is set if the node has any content queries */
|
||||
hasContentQuery = 0b00000000000000000100000000000000,
|
||||
|
||||
/** The index of the first directive on this node is encoded on the most significant bits */
|
||||
DirectiveStartingIndexShift = 14,
|
||||
DirectiveStartingIndexShift = 15,
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -89,13 +92,6 @@ export interface LNode {
|
|||
/** The injector associated with this node. Necessary for DI. */
|
||||
nodeInjector: LInjector|null;
|
||||
|
||||
/**
|
||||
* Optional set of queries that track query-related events for this node.
|
||||
*
|
||||
* If present the node creation/updates are reported to the `LQueries`.
|
||||
*/
|
||||
queries: LQueries|null;
|
||||
|
||||
/**
|
||||
* Pointer to the corresponding TNode object, which stores static
|
||||
* data about this node.
|
||||
|
|
|
|||
|
|
@ -13,26 +13,27 @@ import {LNode} from './node';
|
|||
/** Used for tracking queries (e.g. ViewChild, ContentChild). */
|
||||
export interface LQueries {
|
||||
/**
|
||||
* Ask queries to prepare copy of itself. This assures that tracking new queries on child nodes
|
||||
* The parent LQueries instance.
|
||||
*
|
||||
* When there is a content query, a new LQueries instance is created to avoid mutating any
|
||||
* existing LQueries. After we are done searching content children, the parent property allows
|
||||
* us to traverse back up to the original LQueries instance to continue to search for matches
|
||||
* in the main view.
|
||||
*/
|
||||
parent: LQueries|null;
|
||||
|
||||
/**
|
||||
* Ask queries to prepare copy of itself. This assures that tracking new queries on content nodes
|
||||
* doesn't mutate list of queries tracked on a parent node. We will clone LQueries before
|
||||
* constructing content queries.
|
||||
*/
|
||||
clone(): LQueries|null;
|
||||
|
||||
/**
|
||||
* Used to ask queries if those should be cloned to the child element.
|
||||
*
|
||||
* For example in the case of deep queries the `child()` returns
|
||||
* queries for the child node. In case of shallow queries it returns
|
||||
* `null`.
|
||||
*/
|
||||
child(): LQueries|null;
|
||||
clone(): LQueries;
|
||||
|
||||
/**
|
||||
* Notify `LQueries` that a new `LNode` has been created and needs to be added to query results
|
||||
* if matching query predicate.
|
||||
*/
|
||||
addNode(node: LNode): void;
|
||||
addNode(node: LNode): LQueries|null;
|
||||
|
||||
/**
|
||||
* Notify `LQueries` that a new LContainer was added to ivy data structures. As a result we need
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {getSymbolIterator} from '../util';
|
|||
|
||||
import {assertDefined, assertEqual} from './assert';
|
||||
import {ReadFromInjectorFn, getOrCreateNodeInjectorForNode} from './di';
|
||||
import {assertPreviousIsParent, getCurrentQueries, store, storeCleanupWithContext} from './instructions';
|
||||
import {assertPreviousIsParent, getOrCreateCurrentQueries, isContentQueryHost, store, storeCleanupWithContext} from './instructions';
|
||||
import {DirectiveDefInternal, unusedValueExportToPlacateAjd as unused1} from './interfaces/definition';
|
||||
import {LInjector, unusedValueExportToPlacateAjd as unused2} from './interfaces/injector';
|
||||
import {LContainerNode, LElementNode, LNode, TNode, TNodeFlags, unusedValueExportToPlacateAjd as unused3} from './interfaces/node';
|
||||
|
|
@ -86,10 +86,9 @@ export interface LQuery<T> {
|
|||
}
|
||||
|
||||
export class LQueries_ implements LQueries {
|
||||
shallow: LQuery<any>|null = null;
|
||||
deep: LQuery<any>|null = null;
|
||||
|
||||
constructor(deep?: LQuery<any>) { this.deep = deep == null ? null : deep; }
|
||||
constructor(
|
||||
public parent: LQueries_|null, private shallow: LQuery<any>|null,
|
||||
private deep: LQuery<any>|null) {}
|
||||
|
||||
track<T>(
|
||||
queryList: viewEngine_QueryList<T>, predicate: Type<T>|string[], descend?: boolean,
|
||||
|
|
@ -101,103 +100,124 @@ export class LQueries_ implements LQueries {
|
|||
}
|
||||
}
|
||||
|
||||
clone(): LQueries|null { return this.deep ? new LQueries_(this.deep) : null; }
|
||||
|
||||
child(): LQueries|null {
|
||||
if (this.deep === null) {
|
||||
// if we don't have any deep queries then no need to track anything more.
|
||||
return null;
|
||||
}
|
||||
if (this.shallow === null) {
|
||||
// DeepQuery: We can reuse the current state if the child state would be same as current
|
||||
// state.
|
||||
return this;
|
||||
} else {
|
||||
// We need to create new state
|
||||
return new LQueries_(this.deep);
|
||||
}
|
||||
}
|
||||
clone(): LQueries { return new LQueries_(this, null, this.deep); }
|
||||
|
||||
container(): LQueries|null {
|
||||
let result: LQuery<any>|null = null;
|
||||
let query = this.deep;
|
||||
const shallowResults = copyQueriesToContainer(this.shallow);
|
||||
const deepResults = copyQueriesToContainer(this.deep);
|
||||
|
||||
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,
|
||||
containerValues: null
|
||||
};
|
||||
clonedQuery.next = result;
|
||||
result = clonedQuery;
|
||||
query = query.next;
|
||||
}
|
||||
|
||||
return result ? new LQueries_(result) : null;
|
||||
return shallowResults || deepResults ? new LQueries_(this, shallowResults, deepResults) : null;
|
||||
}
|
||||
|
||||
createView(): LQueries|null {
|
||||
let result: LQuery<any>|null = null;
|
||||
let query = this.deep;
|
||||
const shallowResults = copyQueriesToView(this.shallow);
|
||||
const deepResults = copyQueriesToView(this.deep);
|
||||
|
||||
while (query) {
|
||||
const clonedQuery: LQuery<any> = {
|
||||
next: null,
|
||||
list: query.list,
|
||||
predicate: query.predicate,
|
||||
values: [],
|
||||
containerValues: query.values
|
||||
};
|
||||
clonedQuery.next = result;
|
||||
result = clonedQuery;
|
||||
query = query.next;
|
||||
}
|
||||
|
||||
return result ? new LQueries_(result) : null;
|
||||
return shallowResults || deepResults ? new LQueries_(this, shallowResults, deepResults) : null;
|
||||
}
|
||||
|
||||
insertView(index: number): void {
|
||||
let query = this.deep;
|
||||
while (query) {
|
||||
ngDevMode &&
|
||||
assertDefined(
|
||||
query.containerValues, 'View queries need to have a pointer to container values.');
|
||||
query.containerValues !.splice(index, 0, query.values);
|
||||
query = query.next;
|
||||
}
|
||||
insertView(index, this.shallow);
|
||||
insertView(index, this.deep);
|
||||
}
|
||||
|
||||
addNode(node: LNode): void {
|
||||
add(this.shallow, node);
|
||||
addNode(node: LNode): LQueries|null {
|
||||
add(this.deep, node);
|
||||
|
||||
if (isContentQueryHost(node.tNode)) {
|
||||
add(this.shallow, node);
|
||||
|
||||
if (node.tNode.parent && isContentQueryHost(node.tNode.parent)) {
|
||||
// if node has a content query and parent also has a content query
|
||||
// both queries need to check this node for shallow matches
|
||||
add(this.parent !.shallow, node);
|
||||
}
|
||||
return this.parent;
|
||||
}
|
||||
|
||||
isRootNodeOfQuery(node.tNode) && add(this.shallow, node);
|
||||
return this;
|
||||
}
|
||||
|
||||
removeView(): void {
|
||||
let query = this.deep;
|
||||
while (query) {
|
||||
ngDevMode &&
|
||||
assertDefined(
|
||||
query.containerValues, 'View queries need to have a pointer to container values.');
|
||||
|
||||
const containerValues = query.containerValues !;
|
||||
const viewValuesIdx = containerValues.indexOf(query.values);
|
||||
const removed = containerValues.splice(viewValuesIdx, 1);
|
||||
|
||||
// mark a query as dirty only when removed view had matching modes
|
||||
ngDevMode && assertEqual(removed.length, 1, 'removed.length');
|
||||
if (removed[0].length) {
|
||||
query.list.setDirty();
|
||||
}
|
||||
|
||||
query = query.next;
|
||||
}
|
||||
removeView(this.shallow);
|
||||
removeView(this.deep);
|
||||
}
|
||||
}
|
||||
|
||||
function isRootNodeOfQuery(tNode: TNode) {
|
||||
return tNode.parent === null || isContentQueryHost(tNode.parent);
|
||||
}
|
||||
|
||||
function copyQueriesToContainer(query: LQuery<any>| null): LQuery<any>|null {
|
||||
let result: LQuery<any>|null = null;
|
||||
|
||||
while (query) {
|
||||
const containerValues: any[] = []; // prepare room for views
|
||||
query.values.push(containerValues);
|
||||
const clonedQuery: LQuery<any> = {
|
||||
next: result,
|
||||
list: query.list,
|
||||
predicate: query.predicate,
|
||||
values: containerValues,
|
||||
containerValues: null
|
||||
};
|
||||
result = clonedQuery;
|
||||
query = query.next;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function copyQueriesToView(query: LQuery<any>| null): LQuery<any>|null {
|
||||
let result: LQuery<any>|null = null;
|
||||
|
||||
while (query) {
|
||||
const clonedQuery: LQuery<any> = {
|
||||
next: result,
|
||||
list: query.list,
|
||||
predicate: query.predicate,
|
||||
values: [],
|
||||
containerValues: query.values
|
||||
};
|
||||
result = clonedQuery;
|
||||
query = query.next;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function insertView(index: number, query: LQuery<any>| null) {
|
||||
while (query) {
|
||||
ngDevMode &&
|
||||
assertDefined(
|
||||
query.containerValues, 'View queries need to have a pointer to container values.');
|
||||
query.containerValues !.splice(index, 0, query.values);
|
||||
query = query.next;
|
||||
}
|
||||
}
|
||||
|
||||
function removeView(query: LQuery<any>| null) {
|
||||
while (query) {
|
||||
ngDevMode &&
|
||||
assertDefined(
|
||||
query.containerValues, 'View queries need to have a pointer to container values.');
|
||||
|
||||
const containerValues = query.containerValues !;
|
||||
const viewValuesIdx = containerValues.indexOf(query.values);
|
||||
const removed = containerValues.splice(viewValuesIdx, 1);
|
||||
|
||||
// mark a query as dirty only when removed view had matching modes
|
||||
ngDevMode && assertEqual(removed.length, 1, 'removed.length');
|
||||
if (removed[0].length) {
|
||||
query.list.setDirty();
|
||||
}
|
||||
|
||||
query = query.next;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Iterates over local names for a given node and returns directive index
|
||||
* (or -1 if a local name points to an element).
|
||||
|
|
@ -418,7 +438,7 @@ export function query<T>(
|
|||
read?: QueryReadType<T>| Type<T>): QueryList<T> {
|
||||
ngDevMode && assertPreviousIsParent();
|
||||
const queryList = new QueryList<T>();
|
||||
const queries = getCurrentQueries(LQueries_);
|
||||
const queries = getOrCreateCurrentQueries(LQueries_);
|
||||
queries.track(queryList, predicate, descend, read);
|
||||
storeCleanupWithContext(null, queryList, queryList.destroy);
|
||||
if (memoryIndex != null) {
|
||||
|
|
|
|||
|
|
@ -62,9 +62,6 @@
|
|||
{
|
||||
"name": "PublicFeature"
|
||||
},
|
||||
{
|
||||
"name": "QUERIES"
|
||||
},
|
||||
{
|
||||
"name": "RENDERER"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -677,6 +677,9 @@
|
|||
{
|
||||
"name": "isComponent"
|
||||
},
|
||||
{
|
||||
"name": "isContentQueryHost"
|
||||
},
|
||||
{
|
||||
"name": "isContextDirty"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ function isViewContainerRef(candidate: any): boolean {
|
|||
}
|
||||
|
||||
describe('query', () => {
|
||||
it('should project query children', () => {
|
||||
it('should match projected query children', () => {
|
||||
const Child = createComponent('child', function(rf: RenderFlags, ctx: any) {});
|
||||
|
||||
let child1 = null;
|
||||
|
|
@ -1617,7 +1617,9 @@ describe('query', () => {
|
|||
it('should support combination of deep and shallow queries', () => {
|
||||
/**
|
||||
* % if (exp) { ">
|
||||
* <div #foo></div>
|
||||
* <div #foo>
|
||||
* <div #foo></div>
|
||||
* </div>
|
||||
* % }
|
||||
* <span #foo></span>
|
||||
* class Cmpt {
|
||||
|
|
@ -1639,7 +1641,9 @@ describe('query', () => {
|
|||
let rf0 = embeddedViewStart(0);
|
||||
{
|
||||
if (rf0 & RenderFlags.Create) {
|
||||
element(0, 'div', null, ['foo', '']);
|
||||
elementStart(0, 'div', null, ['foo', '']);
|
||||
{ element(2, 'div', null, ['foo', '']); }
|
||||
elementEnd();
|
||||
}
|
||||
}
|
||||
embeddedViewEnd();
|
||||
|
|
@ -1671,8 +1675,12 @@ describe('query', () => {
|
|||
|
||||
cmptInstance.exp = true;
|
||||
detectChanges(cmptInstance);
|
||||
expect(deep.length).toBe(2);
|
||||
expect(shallow.length).toBe(1);
|
||||
expect(deep.length).toBe(3);
|
||||
|
||||
// embedded % if blocks should behave the same way as *ngIf, namely they
|
||||
// should match shallow queries on the first level of elements underneath
|
||||
// the embedded view boundary.
|
||||
expect(shallow.length).toBe(2);
|
||||
|
||||
cmptInstance.exp = false;
|
||||
detectChanges(cmptInstance);
|
||||
|
|
@ -1773,43 +1781,66 @@ describe('query', () => {
|
|||
});
|
||||
|
||||
describe('content', () => {
|
||||
let withContentInstance: WithContentDirective|null;
|
||||
let shallowCompInstance: ShallowComp|null;
|
||||
|
||||
it('should support content queries for directives', () => {
|
||||
let withContentInstance: WithContentDirective|null = null;
|
||||
beforeEach(() => {
|
||||
withContentInstance = null;
|
||||
shallowCompInstance = null;
|
||||
});
|
||||
|
||||
class WithContentDirective {
|
||||
// @ContentChildren('foo') foos;
|
||||
foos !: QueryList<ElementRef>;
|
||||
contentInitQuerySnapshot = 0;
|
||||
contentCheckedQuerySnapshot = 0;
|
||||
class WithContentDirective {
|
||||
// @ContentChildren('foo')
|
||||
foos !: QueryList<ElementRef>;
|
||||
contentInitQuerySnapshot = 0;
|
||||
contentCheckedQuerySnapshot = 0;
|
||||
|
||||
ngAfterContentInit() { this.contentInitQuerySnapshot = this.foos ? this.foos.length : 0; }
|
||||
ngAfterContentInit() { this.contentInitQuerySnapshot = this.foos ? this.foos.length : 0; }
|
||||
|
||||
ngAfterContentChecked() {
|
||||
this.contentCheckedQuerySnapshot = this.foos ? this.foos.length : 0;
|
||||
}
|
||||
|
||||
static ngComponentDef = defineDirective({
|
||||
type: WithContentDirective,
|
||||
selectors: [['', 'with-content', '']],
|
||||
factory: () => new WithContentDirective(),
|
||||
contentQueries:
|
||||
() => { registerContentQuery(query(null, ['foo'], true, QUERY_READ_FROM_NODE)); },
|
||||
contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
|
||||
let tmp: any;
|
||||
withContentInstance = loadDirective<WithContentDirective>(dirIndex);
|
||||
queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
|
||||
(withContentInstance.foos = tmp);
|
||||
}
|
||||
});
|
||||
ngAfterContentChecked() {
|
||||
this.contentCheckedQuerySnapshot = this.foos ? this.foos.length : 0;
|
||||
}
|
||||
|
||||
static ngComponentDef = defineDirective({
|
||||
type: WithContentDirective,
|
||||
selectors: [['', 'with-content', '']],
|
||||
factory: () => new WithContentDirective(),
|
||||
contentQueries:
|
||||
() => { registerContentQuery(query(null, ['foo'], true, QUERY_READ_FROM_NODE)); },
|
||||
contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
|
||||
let tmp: any;
|
||||
withContentInstance = loadDirective<WithContentDirective>(dirIndex);
|
||||
queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
|
||||
(withContentInstance.foos = tmp);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
class ShallowComp {
|
||||
// @ContentChildren('foo', {descendants: false})
|
||||
foos !: QueryList<ElementRef>;
|
||||
|
||||
static ngComponentDef = defineComponent({
|
||||
type: ShallowComp,
|
||||
selectors: [['shallow-comp']],
|
||||
factory: () => new ShallowComp(),
|
||||
template: function(rf: RenderFlags, ctx: any) {},
|
||||
contentQueries:
|
||||
() => { registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE)); },
|
||||
contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
|
||||
let tmp: any;
|
||||
shallowCompInstance = loadDirective<ShallowComp>(dirIndex);
|
||||
queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
|
||||
(shallowCompInstance.foos = tmp);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
it('should support content queries for directives', () => {
|
||||
/**
|
||||
* <div with-content>
|
||||
* <span #foo></span>
|
||||
* </div>
|
||||
* class Cmpt {
|
||||
* }
|
||||
*/
|
||||
const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
|
|
@ -1834,37 +1865,65 @@ describe('query', () => {
|
|||
`Expected content query results to be available when ngAfterContentChecked was called.`);
|
||||
});
|
||||
|
||||
// https://stackblitz.com/edit/angular-wlenwd?file=src%2Fapp%2Fapp.component.ts
|
||||
it('should support view and content queries matching the same element', () => {
|
||||
let withContentComponentInstance: WithContentComponent;
|
||||
it('should support content query matches on directive hosts', () => {
|
||||
/**
|
||||
* <div with-content #foo>
|
||||
* </div>
|
||||
*/
|
||||
const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
element(0, 'div', ['with-content', ''], ['foo', '']);
|
||||
}
|
||||
}, [WithContentDirective]);
|
||||
|
||||
class WithContentComponent {
|
||||
// @ContentChildren('foo') foos;
|
||||
// TODO(issue/24571): remove '!'.
|
||||
foos !: QueryList<ElementRef>;
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
expect(withContentInstance !.foos.length)
|
||||
.toBe(1, `Expected content query to match <div with-content #foo>.`);
|
||||
});
|
||||
|
||||
static ngComponentDef = defineComponent({
|
||||
type: WithContentComponent,
|
||||
selectors: [['with-content']],
|
||||
factory: () => new WithContentComponent(),
|
||||
contentQueries:
|
||||
() => { registerContentQuery(query(null, ['foo'], true, QUERY_READ_FROM_NODE)); },
|
||||
template: (rf: RenderFlags, ctx: WithContentComponent) => {
|
||||
// intentionally left empty, don't need anything for this test
|
||||
},
|
||||
contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
|
||||
let tmp: any;
|
||||
withContentComponentInstance = loadDirective<WithContentComponent>(dirIndex);
|
||||
queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
|
||||
(withContentComponentInstance.foos = tmp);
|
||||
},
|
||||
});
|
||||
it('should match shallow content queries in views inserted / removed by ngIf', () => {
|
||||
function IfTemplate(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
element(0, 'div', null, ['foo', '']);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* <with-content>
|
||||
* <shallow-comp>
|
||||
* <div *ngIf="showing" #foo></div>
|
||||
* </shallow-comp>
|
||||
*/
|
||||
const AppComponent = createComponent('app-component', function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(0, 'shallow-comp');
|
||||
{ container(1, IfTemplate, null, [AttributeMarker.SelectOnly, 'ngIf', '']); }
|
||||
elementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
elementProperty(1, 'ngIf', bind(ctx.showing));
|
||||
}
|
||||
}, [ShallowComp, NgIf]);
|
||||
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
const qList = shallowCompInstance !.foos;
|
||||
expect(qList.length).toBe(0);
|
||||
|
||||
fixture.component.showing = true;
|
||||
fixture.update();
|
||||
expect(qList.length).toBe(1);
|
||||
|
||||
fixture.component.showing = false;
|
||||
fixture.update();
|
||||
expect(qList.length).toBe(0);
|
||||
});
|
||||
|
||||
|
||||
// https://stackblitz.com/edit/angular-wlenwd?file=src%2Fapp%2Fapp.component.ts
|
||||
it('should support view and content queries matching the same element', () => {
|
||||
/**
|
||||
* <div with-content>
|
||||
* <div #foo></div>
|
||||
* </with-content>
|
||||
* </div>
|
||||
* <div id="after" #bar></div>
|
||||
* class Cmpt {
|
||||
* @ViewChildren('foo, bar') foos;
|
||||
|
|
@ -1874,13 +1933,13 @@ describe('query', () => {
|
|||
'app-component',
|
||||
function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(1, 'with-content');
|
||||
elementStart(1, 'div', ['with-content', '']);
|
||||
{ element(2, 'div', null, ['foo', '']); }
|
||||
elementEnd();
|
||||
element(4, 'div', ['id', 'after'], ['bar', '']);
|
||||
}
|
||||
},
|
||||
[WithContentComponent], [],
|
||||
[WithContentDirective], [],
|
||||
function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['foo', 'bar'], true, QUERY_READ_FROM_NODE);
|
||||
|
|
@ -1895,14 +1954,48 @@ describe('query', () => {
|
|||
const viewQList = fixture.component.foos;
|
||||
|
||||
expect(viewQList.length).toBe(2);
|
||||
expect(withContentComponentInstance !.foos.length).toBe(1);
|
||||
expect(viewQList.first.nativeElement)
|
||||
.toBe(withContentComponentInstance !.foos.first.nativeElement);
|
||||
expect(withContentInstance !.foos.length).toBe(1);
|
||||
expect(viewQList.first.nativeElement).toBe(withContentInstance !.foos.first.nativeElement);
|
||||
expect(viewQList.last.nativeElement.id).toBe('after');
|
||||
});
|
||||
|
||||
it('should report results to appropriate queries where content queries are nested', () => {
|
||||
it('should not report deep content query matches found above content children', () => {
|
||||
/**
|
||||
* <div with-content>
|
||||
* <div #foo id="yes"></div> <-- should match content query
|
||||
* </div>
|
||||
* <div #foo></div> <-- should not match content query
|
||||
* class AppComponent {
|
||||
* @ViewChildren('bar') bars: QueryList<ElementRef>;
|
||||
* }
|
||||
*/
|
||||
const AppComponent = createComponent(
|
||||
'app-component',
|
||||
function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(1, 'div', ['with-content', '']);
|
||||
{ element(2, 'div', ['id', 'yes'], ['foo', '']); }
|
||||
elementEnd();
|
||||
element(4, 'div', null, ['foo', '']);
|
||||
}
|
||||
},
|
||||
[WithContentDirective], [],
|
||||
function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
query(0, ['bar'], true, QUERY_READ_FROM_NODE);
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
let tmp: any;
|
||||
queryRefresh(tmp = load<QueryList<any>>(0)) && (ctx.bars = tmp as QueryList<any>);
|
||||
}
|
||||
});
|
||||
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
expect(withContentInstance !.foos.length).toBe(1);
|
||||
expect(withContentInstance !.foos.first.nativeElement.id).toEqual('yes');
|
||||
});
|
||||
|
||||
it('should report results to appropriate queries where deep content queries are nested', () => {
|
||||
class QueryDirective {
|
||||
fooBars: any;
|
||||
static ngDirectiveDef = defineDirective({
|
||||
|
|
@ -1962,6 +2055,63 @@ describe('query', () => {
|
|||
expect(inInstance !.fooBars.length).toBe(1);
|
||||
});
|
||||
|
||||
|
||||
it('should support nested shallow content queries ', () => {
|
||||
let outInstance: QueryDirective;
|
||||
let inInstance: QueryDirective;
|
||||
|
||||
class QueryDirective {
|
||||
fooBars: any;
|
||||
static ngDirectiveDef = defineDirective({
|
||||
type: QueryDirective,
|
||||
selectors: [['', 'query', '']],
|
||||
exportAs: 'query',
|
||||
factory: () => new QueryDirective(),
|
||||
contentQueries: () => {
|
||||
// @ContentChildren('foo, bar, baz', {descendants: true}) fooBars:
|
||||
// QueryList<ElementRef>;
|
||||
registerContentQuery(query(null, ['foo'], false, QUERY_READ_FROM_NODE));
|
||||
},
|
||||
contentQueriesRefresh: (dirIndex: number, queryStartIdx: number) => {
|
||||
let tmp: any;
|
||||
const instance = loadDirective<QueryDirective>(dirIndex);
|
||||
queryRefresh(tmp = loadQueryList<ElementRef>(queryStartIdx)) &&
|
||||
(instance.fooBars = tmp);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const AppComponent = createComponent(
|
||||
'app-component',
|
||||
/**
|
||||
* <div query #out="query">
|
||||
* <div query #in="query" #foo>
|
||||
* <span #foo></span>
|
||||
* </div>
|
||||
* </div>
|
||||
*/
|
||||
function(rf: RenderFlags, ctx: any) {
|
||||
if (rf & RenderFlags.Create) {
|
||||
elementStart(0, 'div', ['query', ''], ['out', 'query']);
|
||||
{
|
||||
elementStart(2, 'div', ['query', ''], ['in', 'query', 'foo', '']);
|
||||
{ element(5, 'span', ['id', 'bar'], ['foo', '']); }
|
||||
elementEnd();
|
||||
}
|
||||
elementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
outInstance = load<QueryDirective>(1);
|
||||
inInstance = load<QueryDirective>(3);
|
||||
}
|
||||
},
|
||||
[QueryDirective]);
|
||||
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
expect(outInstance !.fooBars.length).toBe(1);
|
||||
expect(inInstance !.fooBars.length).toBe(2);
|
||||
});
|
||||
|
||||
it('should respect shallow flag on content queries when mixing deep and shallow queries',
|
||||
() => {
|
||||
class ShallowQueryDirective {
|
||||
|
|
@ -2012,6 +2162,9 @@ describe('query', () => {
|
|||
/**
|
||||
* <div shallow-query #shallow="shallow-query" deep-query #deep="deep-query">
|
||||
* <span #foo></span>
|
||||
* <div>
|
||||
* <span #foo></span>
|
||||
* </div>
|
||||
* </div>
|
||||
*/
|
||||
function(rf: RenderFlags, ctx: any) {
|
||||
|
|
@ -2019,7 +2172,12 @@ describe('query', () => {
|
|||
elementStart(
|
||||
0, 'div', [AttributeMarker.SelectOnly, 'shallow-query', 'deep-query'],
|
||||
['shallow', 'shallow-query', 'deep', 'deep-query']);
|
||||
{ element(3, 'span', ['id', 'foo'], ['foo', '']); }
|
||||
{
|
||||
element(3, 'span', null, ['foo', '']);
|
||||
elementStart(5, 'div');
|
||||
{ element(6, 'span', null, ['foo', '']); }
|
||||
elementEnd();
|
||||
}
|
||||
elementEnd();
|
||||
}
|
||||
if (rf & RenderFlags.Update) {
|
||||
|
|
@ -2031,7 +2189,7 @@ describe('query', () => {
|
|||
|
||||
const fixture = new ComponentFixture(AppComponent);
|
||||
expect(shallowInstance !.foos.length).toBe(1);
|
||||
expect(deepInstance !.foos.length).toBe(1);
|
||||
expect(deepInstance !.foos.length).toBe(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue