feat(ivy): allow combined context discovery for components, directives and elements (#25754)
PR Close #25754
This commit is contained in:
Matias Niemelä
committed by
Igor Minar
Igor Minar
parent
d2dfd48be0
commit
62be8c2e2f
396
packages/core/src/render3/context_discovery.ts
Normal file
396
packages/core/src/render3/context_discovery.ts
Normal file
@ -0,0 +1,396 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* 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 './ng_dev_mode';
|
||||
|
||||
import {assertEqual} from './assert';
|
||||
import {LElementNode, TNode, TNodeFlags} from './interfaces/node';
|
||||
import {RElement} from './interfaces/renderer';
|
||||
import {CONTEXT, DIRECTIVES, HEADER_OFFSET, LViewData, TVIEW} from './interfaces/view';
|
||||
import {readElementValue} from './util';
|
||||
|
||||
/**
|
||||
* This property will be monkey-patched on elements, components and directives
|
||||
*/
|
||||
export const MONKEY_PATCH_KEY_NAME = '__ngContext__';
|
||||
|
||||
/**
|
||||
* The internal view context which is specific to a given DOM element, directive or
|
||||
* component instance. Each value in here (besides the LViewData and element node details)
|
||||
* can be present, null or undefined. If undefined then it implies the value has not been
|
||||
* looked up yet, otherwise, if null, then a lookup was executed and nothing was found.
|
||||
*
|
||||
* Each value will get filled when the respective value is examined within the getContext
|
||||
* function. The component, element and each directive instance will share the same instance
|
||||
* of the context.
|
||||
*/
|
||||
export interface LContext {
|
||||
/** The component\'s view data */
|
||||
lViewData: LViewData;
|
||||
|
||||
/** The index instance of the LNode */
|
||||
lNodeIndex: number;
|
||||
|
||||
/** The instance of the DOM node that is attached to the lNode */
|
||||
native: RElement;
|
||||
|
||||
/** The instance of the Component node */
|
||||
component: {}|null|undefined;
|
||||
|
||||
/** The list of indices for the active directives that exist on this element */
|
||||
directiveIndices: number[]|null|undefined;
|
||||
|
||||
/** The list of active directives that exist on this element */
|
||||
directives: Array<{}>|null|undefined;
|
||||
}
|
||||
|
||||
/** Returns the matching `LContext` data for a given DOM node, directive or component instance.
|
||||
*
|
||||
* This function will examine the provided DOM element, component, or directive instance\'s
|
||||
* monkey-patched property to derive the `LContext` data. Once called then the monkey-patched
|
||||
* value will be that of the newly created `LContext`.
|
||||
*
|
||||
* If the monkey-patched value is the `LViewData` instance then the context value for that
|
||||
* target will be created and the monkey-patch reference will be updated. Therefore when this
|
||||
* function is called it may mutate the provided element\'s, component\'s or any of the associated
|
||||
* directive\'s monkey-patch values.
|
||||
*
|
||||
* If the monkey-patch value is not detected then the code will walk up the DOM until an element
|
||||
* is found which contains a monkey-patch reference. When that occurs then the provided element
|
||||
* will be updated with a new context (which is then returned). If the monkey-patch value is not
|
||||
* detected for a component/directive instance then it will throw an error (all components and
|
||||
* directives should be automatically monkey-patched by ivy).
|
||||
*/
|
||||
export function getContext(target: any): LContext|null {
|
||||
let mpValue = readPatchedData(target);
|
||||
if (mpValue) {
|
||||
// only when it's an array is it considered an LViewData instance
|
||||
// ... otherwise it's an already constructed LContext instance
|
||||
if (Array.isArray(mpValue)) {
|
||||
const lViewData: LViewData = mpValue !;
|
||||
let lNodeIndex: number;
|
||||
let component: any = undefined;
|
||||
let directiveIndices: number[]|null|undefined = undefined;
|
||||
let directives: any[]|null|undefined = undefined;
|
||||
|
||||
if (isComponentInstance(target)) {
|
||||
lNodeIndex = findViaComponent(lViewData, target);
|
||||
if (lNodeIndex == -1) {
|
||||
throw new Error('The provided component was not found in the application');
|
||||
}
|
||||
component = target;
|
||||
} else if (isDirectiveInstance(target)) {
|
||||
lNodeIndex = findViaDirective(lViewData, target);
|
||||
if (lNodeIndex == -1) {
|
||||
throw new Error('The provided directive was not found in the application');
|
||||
}
|
||||
directiveIndices = discoverDirectiveIndices(lViewData, lNodeIndex);
|
||||
directives = directiveIndices ? discoverDirectives(lViewData, directiveIndices) : null;
|
||||
} else {
|
||||
lNodeIndex = findViaNativeElement(lViewData, target as RElement);
|
||||
if (lNodeIndex == -1) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// the goal is not to fill the entire context full of data because the lookups
|
||||
// are expensive. Instead, only the target data (the element, compontent or
|
||||
// directive details) are filled into the context. If called multiple times
|
||||
// with different target values then the missing target data will be filled in.
|
||||
const lNode = getLNodeFromViewData(lViewData, lNodeIndex) !;
|
||||
const existingCtx = readPatchedData(lNode.native);
|
||||
const context: LContext = (existingCtx && !Array.isArray(existingCtx)) ?
|
||||
existingCtx :
|
||||
createLContext(lViewData, lNodeIndex, lNode.native);
|
||||
|
||||
// only when the component has been discovered then update the monkey-patch
|
||||
if (component && context.component === undefined) {
|
||||
context.component = component;
|
||||
attachPatchData(context.component, context);
|
||||
}
|
||||
|
||||
// only when the directives have been discovered then update the monkey-patch
|
||||
if (directives && directiveIndices && context.directives === undefined) {
|
||||
context.directiveIndices = directiveIndices;
|
||||
context.directives = directives;
|
||||
for (let i = 0; i < directives.length; i++) {
|
||||
attachPatchData(directives[i], context);
|
||||
}
|
||||
}
|
||||
|
||||
attachPatchData(context.native, context);
|
||||
mpValue = context;
|
||||
}
|
||||
} else {
|
||||
const rElement = target as RElement;
|
||||
ngDevMode && assertDomElement(rElement);
|
||||
|
||||
// if the context is not found then we need to traverse upwards up the DOM
|
||||
// to find the nearest element that has already been monkey patched with data
|
||||
let parent = rElement as any;
|
||||
while (parent = parent.parentNode) {
|
||||
const parentContext = readPatchedData(parent);
|
||||
if (parentContext) {
|
||||
let lViewData: LViewData|null;
|
||||
if (Array.isArray(parentContext)) {
|
||||
lViewData = parentContext as LViewData;
|
||||
} else {
|
||||
lViewData = parentContext.lViewData;
|
||||
}
|
||||
|
||||
// the edge of the app was also reached here through another means
|
||||
// (maybe because the DOM was changed manually).
|
||||
if (!lViewData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const index = findViaNativeElement(lViewData, rElement);
|
||||
if (index >= 0) {
|
||||
const lNode = getLNodeFromViewData(lViewData, index) !;
|
||||
const context = createLContext(lViewData, index, lNode.native);
|
||||
attachPatchData(lNode.native, context);
|
||||
mpValue = context;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return (mpValue as LContext) || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an empty instance of a `LContext` context
|
||||
*/
|
||||
function createLContext(lViewData: LViewData, lNodeIndex: number, native: RElement): LContext {
|
||||
return {
|
||||
lViewData,
|
||||
lNodeIndex,
|
||||
native,
|
||||
component: undefined,
|
||||
directiveIndices: undefined,
|
||||
directives: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A utility function for retrieving the matching lElementNode
|
||||
* from a given DOM element, component or directive.
|
||||
*/
|
||||
export function getLElementNode(target: any): LElementNode|null {
|
||||
const context = getContext(target);
|
||||
return context ? getLNodeFromViewData(context.lViewData, context.lNodeIndex) : null;
|
||||
}
|
||||
|
||||
export function getLElementFromRootComponent(componentInstance: {}): LElementNode|null {
|
||||
// the host element for the root component is ALWAYS the first element
|
||||
// in the lViewData array (which is where HEADER_OFFSET points to)
|
||||
return getLElementFromComponent(componentInstance, HEADER_OFFSET);
|
||||
}
|
||||
|
||||
/**
|
||||
* A simplified lookup function for finding the LElementNode from a component instance.
|
||||
*
|
||||
* This function exists for tree-shaking purposes to avoid having to pull in everything
|
||||
* that `getContext` has in the event that an Angular application doesn't need to have
|
||||
* any programmatic access to an element's context (only change detection uses this function).
|
||||
*/
|
||||
export function getLElementFromComponent(
|
||||
componentInstance: {}, expectedLNodeIndex?: number): LElementNode|null {
|
||||
let lViewData = readPatchedData(componentInstance);
|
||||
let lNode: LElementNode;
|
||||
|
||||
if (Array.isArray(lViewData)) {
|
||||
expectedLNodeIndex = expectedLNodeIndex || findViaComponent(lViewData, componentInstance);
|
||||
lNode = readElementValue(lViewData[expectedLNodeIndex]);
|
||||
const context = createLContext(lViewData, expectedLNodeIndex, lNode.native);
|
||||
context.component = componentInstance;
|
||||
attachPatchData(componentInstance, context);
|
||||
attachPatchData(context.native, context);
|
||||
} else {
|
||||
const context = lViewData as any as LContext;
|
||||
lNode = readElementValue(context.lViewData[context.lNodeIndex]);
|
||||
}
|
||||
|
||||
return lNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Assigns the given data to the given target (which could be a component,
|
||||
* directive or DOM node instance) using monkey-patching.
|
||||
*/
|
||||
export function attachPatchData(target: any, data: LViewData | LContext) {
|
||||
target[MONKEY_PATCH_KEY_NAME] = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the monkey-patch value data present on the target (which could be
|
||||
* a component, directive or a DOM node).
|
||||
*/
|
||||
export function readPatchedData(target: any): LViewData|LContext|null {
|
||||
return target[MONKEY_PATCH_KEY_NAME];
|
||||
}
|
||||
|
||||
export function isComponentInstance(instance: any): boolean {
|
||||
return instance && instance.constructor && instance.constructor.ngComponentDef;
|
||||
}
|
||||
|
||||
export function isDirectiveInstance(instance: any): boolean {
|
||||
return instance && instance.constructor && instance.constructor.ngDirectiveDef;
|
||||
}
|
||||
|
||||
/**
|
||||
* Locates the element within the given LViewData and returns the matching index
|
||||
*/
|
||||
function findViaNativeElement(lViewData: LViewData, native: RElement): number {
|
||||
let tNode = lViewData[TVIEW].firstChild;
|
||||
while (tNode) {
|
||||
const lNode = getLNodeFromViewData(lViewData, tNode.index) !;
|
||||
if (lNode.native === native) {
|
||||
return tNode.index;
|
||||
}
|
||||
tNode = traverseNextElement(tNode);
|
||||
}
|
||||
|
||||
return -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Locates the next tNode (child, sibling or parent).
|
||||
*/
|
||||
function traverseNextElement(tNode: TNode): TNode|null {
|
||||
if (tNode.child) {
|
||||
return tNode.child;
|
||||
} else if (tNode.next) {
|
||||
return tNode.next;
|
||||
} else if (tNode.parent) {
|
||||
return tNode.parent.next || null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Locates the component within the given LViewData and returns the matching index
|
||||
*/
|
||||
function findViaComponent(lViewData: LViewData, componentInstance: {}): number {
|
||||
const componentIndices = lViewData[TVIEW].components;
|
||||
if (componentIndices) {
|
||||
for (let i = 0; i < componentIndices.length; i++) {
|
||||
const elementComponentIndex = componentIndices[i];
|
||||
const lNodeData = readElementValue(lViewData[elementComponentIndex] !).data !;
|
||||
if (lNodeData[CONTEXT] === componentInstance) {
|
||||
return elementComponentIndex;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const rootNode = lViewData[HEADER_OFFSET];
|
||||
const rootComponent = rootNode.data[CONTEXT];
|
||||
if (rootComponent === componentInstance) {
|
||||
// we are dealing with the root element here therefore we know that the
|
||||
// element is the very first element after the HEADER data in the lView
|
||||
return HEADER_OFFSET;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Locates the directive within the given LViewData and returns the matching index
|
||||
*/
|
||||
function findViaDirective(lViewData: LViewData, directiveInstance: {}): number {
|
||||
// if a directive is monkey patched then it will (by default)
|
||||
// have a reference to the LViewData of the current view. The
|
||||
// element bound to the directive being search lives somewhere
|
||||
// in the view data. By first checking to see if the instance
|
||||
// is actually present we can narrow down to which lElementNode
|
||||
// contains the instance of the directive and then return the index
|
||||
const directivesAcrossView = lViewData[DIRECTIVES];
|
||||
const directiveIndex =
|
||||
directivesAcrossView ? directivesAcrossView.indexOf(directiveInstance) : -1;
|
||||
if (directiveIndex >= 0) {
|
||||
let tNode = lViewData[TVIEW].firstChild;
|
||||
while (tNode) {
|
||||
const lNode = getLNodeFromViewData(lViewData, tNode.index) !;
|
||||
const directiveIndexStart = getDirectiveStartIndex(lNode);
|
||||
const directiveIndexEnd = getDirectiveEndIndex(lNode, directiveIndexStart);
|
||||
if (directiveIndex >= directiveIndexStart && directiveIndex < directiveIndexEnd) {
|
||||
return tNode.index;
|
||||
}
|
||||
tNode = traverseNextElement(tNode);
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
}
|
||||
|
||||
function assertDomElement(element: any) {
|
||||
assertEqual(element.nodeType, 1, 'The provided value must be an instance of an HTMLElement');
|
||||
}
|
||||
|
||||
/**
|
||||
* Retruns the instance of the LElementNode at the given index in the LViewData.
|
||||
*
|
||||
* This function will also unwrap the inner value incase it's stuffed into an
|
||||
* array (which is what happens when [style] and [class] bindings are present
|
||||
* in the view instructions for the element being returned).
|
||||
*/
|
||||
function getLNodeFromViewData(lViewData: LViewData, lElementIndex: number): LElementNode|null {
|
||||
const value = lViewData[lElementIndex];
|
||||
return value ? readElementValue(value) : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a collection of directive index values that are used on the element
|
||||
* (which is referenced by the lNodeIndex)
|
||||
*/
|
||||
function discoverDirectiveIndices(lViewData: LViewData, lNodeIndex: number): number[]|null {
|
||||
const directivesAcrossView = lViewData[DIRECTIVES];
|
||||
const lNode = getLNodeFromViewData(lViewData, lNodeIndex);
|
||||
if (lNode && directivesAcrossView && directivesAcrossView.length) {
|
||||
// this check for tNode is to determine if the calue is a LEmementNode instance
|
||||
const directiveIndexStart = getDirectiveStartIndex(lNode);
|
||||
const directiveIndexEnd = getDirectiveEndIndex(lNode, directiveIndexStart);
|
||||
const directiveIndices: number[] = [];
|
||||
for (let i = directiveIndexStart; i < directiveIndexEnd; i++) {
|
||||
// special case since the instance of the component (if it exists)
|
||||
// is stored in the directives array.
|
||||
if (i > directiveIndexStart ||
|
||||
!isComponentInstance(directivesAcrossView[directiveIndexStart])) {
|
||||
directiveIndices.push(i);
|
||||
}
|
||||
}
|
||||
return directiveIndices.length ? directiveIndices : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function discoverDirectives(lViewData: LViewData, directiveIndices: number[]): number[]|null {
|
||||
const directives: any[] = [];
|
||||
const directiveInstances = lViewData[DIRECTIVES];
|
||||
if (directiveInstances) {
|
||||
for (let i = 0; i < directiveIndices.length; i++) {
|
||||
const directiveIndex = directiveIndices[i];
|
||||
const directive = directiveInstances[directiveIndex];
|
||||
directives.push(directive);
|
||||
}
|
||||
}
|
||||
return directives;
|
||||
}
|
||||
|
||||
function getDirectiveStartIndex(lNode: LElementNode): number {
|
||||
// the tNode instances store a flag value which then has a
|
||||
// pointer which tells the starting index of where all the
|
||||
// active directives are in the master directive array
|
||||
return lNode.tNode.flags >> TNodeFlags.DirectiveStartingIndexShift;
|
||||
}
|
||||
|
||||
function getDirectiveEndIndex(lNode: LElementNode, startIndex: number): number {
|
||||
// The end value is also apart of the same flag
|
||||
// (see `TNodeFlags` to see how the flag bit shifting
|
||||
// values are used).
|
||||
const count = lNode.tNode.flags & TNodeFlags.DirectiveCountMask;
|
||||
return count ? (startIndex + count) : -1;
|
||||
}
|
||||
@ -11,8 +11,9 @@ import {Renderer2, RendererType2} from '../render/api';
|
||||
import {DebugContext} from '../view';
|
||||
import {DebugRenderer2, DebugRendererFactory2} from '../view/services';
|
||||
|
||||
import {getLElementNode} from './context_discovery';
|
||||
import * as di from './di';
|
||||
import {NG_HOST_SYMBOL, _getViewData} from './instructions';
|
||||
import {_getViewData} from './instructions';
|
||||
import {LElementNode} from './interfaces/node';
|
||||
import {CONTEXT, DIRECTIVES, LViewData, TVIEW} from './interfaces/view';
|
||||
|
||||
@ -85,7 +86,7 @@ class Render3DebugContext implements DebugContext {
|
||||
const currentNode = this.view[this.nodeIndex];
|
||||
for (let dirIndex = 0; dirIndex < directives.length; dirIndex++) {
|
||||
const directive = directives[dirIndex];
|
||||
if (directive[NG_HOST_SYMBOL] === currentNode) {
|
||||
if (getLElementNode(directive) === currentNode) {
|
||||
matchedDirectives.push(directive.constructor);
|
||||
}
|
||||
}
|
||||
@ -112,4 +113,4 @@ class Render3DebugContext implements DebugContext {
|
||||
|
||||
// TODO(vicb): check previous implementation
|
||||
logError(console: Console, ...values: any[]): void { console.error(...values); }
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* 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 {RElement} from './interfaces/renderer';
|
||||
import {HEADER_OFFSET, LViewData} from './interfaces/view';
|
||||
import {StylingIndex} from './styling';
|
||||
|
||||
export const MONKEY_PATCH_KEY_NAME = '__ng_data__';
|
||||
|
||||
/** The internal element context which is specific to a given DOM node */
|
||||
export interface ElementContext {
|
||||
/** The component\'s view data */
|
||||
lViewData: LViewData;
|
||||
|
||||
/** The index of the element within the view data array */
|
||||
index: number;
|
||||
|
||||
/** The instance of the DOM node */
|
||||
native: RElement;
|
||||
}
|
||||
|
||||
/** Returns the matching `ElementContext` data for a given DOM node.
|
||||
*
|
||||
* This function will examine the provided DOM element's monkey-patched property to figure out the
|
||||
* associated index and view data (`LViewData`).
|
||||
*
|
||||
* If the monkey-patched value is the `LViewData` instance then the element context for that
|
||||
* element will be created and the monkey-patch reference will be updated. Therefore when this
|
||||
* function is called it may mutate the provided element\'s monkey-patch value.
|
||||
*
|
||||
* If the monkey-patch value is not detected then the code will walk up the DOM until an element
|
||||
* is found which contains a monkey-patch reference. When that occurs then the provided element
|
||||
* will be updated with a new context (which is then returned).
|
||||
*/
|
||||
export function getElementContext(element: RElement): ElementContext|null {
|
||||
let context = (element as any)[MONKEY_PATCH_KEY_NAME] as ElementContext | LViewData | null;
|
||||
if (context) {
|
||||
if (Array.isArray(context)) {
|
||||
const lViewData = context as LViewData;
|
||||
const index = findMatchingElement(element, lViewData);
|
||||
context = {index, native: element, lViewData};
|
||||
attachLViewDataToNode(element, context);
|
||||
}
|
||||
} else {
|
||||
let parent = element as any;
|
||||
while (parent = parent.parentNode) {
|
||||
const parentContext =
|
||||
(parent as any)[MONKEY_PATCH_KEY_NAME] as ElementContext | LViewData | null;
|
||||
if (parentContext) {
|
||||
const lViewData =
|
||||
Array.isArray(parentContext) ? (parentContext as LViewData) : parentContext.lViewData;
|
||||
const index = findMatchingElement(element, lViewData);
|
||||
if (index >= 0) {
|
||||
context = {index, native: element, lViewData};
|
||||
attachLViewDataToNode(element, context);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return (context as ElementContext) || null;
|
||||
}
|
||||
|
||||
/** Locates the element within the given LViewData and returns the matching index */
|
||||
function findMatchingElement(element: RElement, lViewData: LViewData): number {
|
||||
for (let i = HEADER_OFFSET; i < lViewData.length; i++) {
|
||||
let result = lViewData[i];
|
||||
if (result) {
|
||||
// special case for styling since when [class] and [style] bindings
|
||||
// are used they will wrap the element into a StylingContext array
|
||||
if (Array.isArray(result)) {
|
||||
result = result[StylingIndex.ElementPosition];
|
||||
}
|
||||
if (result.native === element) return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
/** Assigns the given data to a DOM element using monkey-patching */
|
||||
export function attachLViewDataToNode(node: any, data: LViewData | ElementContext) {
|
||||
node[MONKEY_PATCH_KEY_NAME] = data;
|
||||
}
|
||||
@ -13,7 +13,7 @@ import {Sanitizer} from '../sanitization/security';
|
||||
import {StyleSanitizeFn} from '../sanitization/style_sanitizer';
|
||||
|
||||
import {assertDefined, assertEqual, assertLessThan, assertNotDefined, assertNotEqual} from './assert';
|
||||
import {attachLViewDataToNode} from './element_discovery';
|
||||
import {attachPatchData, getLElementFromComponent, getLElementFromRootComponent} from './context_discovery';
|
||||
import {throwCyclicDependencyError, throwErrorIfNoChangesMode, throwMultipleComponentError} from './errors';
|
||||
import {executeHooks, executeInitHooks, queueInitHooks, queueLifecycleHooks} from './hooks';
|
||||
import {ACTIVE_INDEX, LContainer, RENDER_PARENT, VIEWS} from './interfaces/container';
|
||||
@ -31,12 +31,6 @@ import {StylingContext, allocStylingContext, createStylingContextTemplate, rende
|
||||
import {assertDataInRangeInternal, isDifferent, loadElementInternal, loadInternal, stringify} from './util';
|
||||
import {ViewRef} from './view_ref';
|
||||
|
||||
/**
|
||||
* Directive (D) sets a property on all component instances using this constant as a key and the
|
||||
* component's host node (LElement) as the value. This is used in methods like detectChanges to
|
||||
* facilitate jumping from an instance to the host node.
|
||||
*/
|
||||
export const NG_HOST_SYMBOL = '__ngHostLNode__';
|
||||
|
||||
/**
|
||||
* A permanent marker promise which signifies that the current CD tree is
|
||||
@ -471,7 +465,11 @@ export function createLNode(
|
||||
if (previousTNode.dynamicContainerNode) previousTNode.dynamicContainerNode.next = tNode;
|
||||
}
|
||||
}
|
||||
|
||||
node.tNode = tData[adjustedIndex] as TNode;
|
||||
if (!tView.firstChild && type === TNodeType.Element) {
|
||||
tView.firstChild = node.tNode;
|
||||
}
|
||||
|
||||
// Now link ourselves into the tree.
|
||||
if (isParent) {
|
||||
@ -806,7 +804,7 @@ export function elementStart(
|
||||
// monkey-patched with the component view data so that the element can be inspected
|
||||
// later on using any element discovery utility methods (see `element_discovery.ts`)
|
||||
if (elementDepthCount === 0) {
|
||||
attachLViewDataToNode(native, viewData);
|
||||
attachPatchData(native, viewData);
|
||||
}
|
||||
elementDepthCount++;
|
||||
}
|
||||
@ -1096,7 +1094,8 @@ export function createTView(
|
||||
components: null,
|
||||
directiveRegistry: typeof directives === 'function' ? directives() : directives,
|
||||
pipeRegistry: typeof pipes === 'function' ? pipes() : pipes,
|
||||
currentMatches: null
|
||||
currentMatches: null,
|
||||
firstChild: null,
|
||||
};
|
||||
}
|
||||
|
||||
@ -1760,8 +1759,7 @@ export function baseDirectiveCreate<T>(
|
||||
'directives should be created before any bindings');
|
||||
ngDevMode && assertPreviousIsParent();
|
||||
|
||||
Object.defineProperty(
|
||||
directive, NG_HOST_SYMBOL, {enumerable: false, value: previousOrParentNode});
|
||||
attachPatchData(directive, viewData);
|
||||
|
||||
if (directives == null) viewData[DIRECTIVES] = directives = [];
|
||||
|
||||
@ -2416,7 +2414,7 @@ export function tick<T>(component: T): void {
|
||||
function tickRootContext(rootContext: RootContext) {
|
||||
for (let i = 0; i < rootContext.components.length; i++) {
|
||||
const rootComponent = rootContext.components[i];
|
||||
const hostNode = _getComponentHostLElementNode(rootComponent);
|
||||
const hostNode = _getComponentHostLElementNode(rootComponent, true);
|
||||
|
||||
ngDevMode && assertDefined(hostNode.data, 'Component host node should be attached to an LView');
|
||||
renderComponentOrTemplate(hostNode, getRootView(rootComponent), rootComponent);
|
||||
@ -2865,9 +2863,11 @@ function assertDataNext(index: number, arr?: any[]) {
|
||||
arr.length, index, `index ${index} expected to be at the end of arr (length ${arr.length})`);
|
||||
}
|
||||
|
||||
export function _getComponentHostLElementNode<T>(component: T): LElementNode {
|
||||
export function _getComponentHostLElementNode<T>(
|
||||
component: T, isRootComponent?: boolean): LElementNode {
|
||||
ngDevMode && assertDefined(component, 'expecting component got null');
|
||||
const lElementNode = (component as any)[NG_HOST_SYMBOL] as LElementNode;
|
||||
const lElementNode = isRootComponent ? getLElementFromRootComponent(component) ! :
|
||||
getLElementFromComponent(component) !;
|
||||
ngDevMode && assertDefined(component, 'object is not a component');
|
||||
return lElementNode;
|
||||
}
|
||||
|
||||
@ -314,6 +314,11 @@ export interface TView {
|
||||
*/
|
||||
childIndex: number;
|
||||
|
||||
/**
|
||||
* A reference to the first child node located in the view.
|
||||
*/
|
||||
firstChild: TNode|null;
|
||||
|
||||
/**
|
||||
* Selector matches for a node are temporarily cached on the TView so the
|
||||
* DI system can eagerly instantiate directives on the same node if they are
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
*/
|
||||
|
||||
import {assertDefined} from './assert';
|
||||
import {attachLViewDataToNode} from './element_discovery';
|
||||
import {attachPatchData} from './context_discovery';
|
||||
import {callHooks} from './hooks';
|
||||
import {LContainer, RENDER_PARENT, VIEWS, unusedValueExportToPlacateAjd as unused1} from './interfaces/container';
|
||||
import {LContainerNode, LElementContainerNode, LElementNode, LNode, LProjectionNode, LTextNode, LViewNode, TNode, TNodeFlags, TNodeType, unusedValueExportToPlacateAjd as unused2} from './interfaces/node';
|
||||
@ -701,7 +701,7 @@ export function appendProjectedNode(
|
||||
// the projected contents are processed while in the shadow view (which is the currentView)
|
||||
// therefore we need to extract the view where the host element lives since it's the
|
||||
// logical container of the content projected views
|
||||
attachLViewDataToNode(node.native, parentView);
|
||||
attachPatchData(node.native, parentView);
|
||||
|
||||
if (node.tNode.type === TNodeType.Container) {
|
||||
// The node we are adding is a container and we are adding it to an element which
|
||||
|
||||
Reference in New Issue
Block a user