iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): Allow modification of lifecycle hooks any time before bootstrap (#35464) 

Currently we read lifecycle hooks eagerly during `ɵɵdefineComponent`.
The result is that it is not possible to do any sort of meta-programing
such as mixins or adding lifecycle hooks using custom decorators since
any such code executes after `ɵɵdefineComponent` has extracted the
lifecycle hooks from the prototype. Additionally the behavior is
inconsistent between AOT and JIT mode. In JIT mode overriding lifecycle
hooks is possible because the whole `ɵɵdefineComponent` is placed in
getter which is executed lazily. This is because JIT mode must compile a
template which can be specified as `templateURL` and those we are
waiting for its resolution.

- `+` `ɵɵdefineComponent` becomes smaller as it no longer needs to copy
  lifecycle hooks from prototype to `ComponentDef`
- `-` `ɵɵNgOnChangesFeature` feature is now always included with the
  codebase as it is no longer tree shakable.

Previously we have read lifecycle hooks from prototype in the
`ɵɵdefineComponent` so that lifecycle hook access would be monomorphic.
This decision was made before we had `T*` data structures. By not
reading the lifecycle hooks we are moving the megamorhic read form
`ɵɵdefineComponent` to instructions. However, the reads happen on
`firstTemplatePass` only and are subsequently cached in the `T*` data
structures. The result is that the overall performance should be same
(or slightly better as the intermediate `ComponentDef` has been
removed.)

- [ ] Remove `ɵɵNgOnChangesFeature` from compiler. (It will no longer
      be a feature.)
- [ ] Discuss the future of `Features` as they hinder meta-programing.

Fix #30497

PR Close #35464
This commit is contained in:
Misko Hevery 2020-02-14 18:02:11 -08:00 committed by Andrew Kushnir
parent 469aba0140
commit 737506e79c
13 changed files with 264 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
goldens/public-api/core/core.d.ts vendored
View File

@ -894,7 +894,7 @@ export declare function ɵɵnextContext<T = any>(level?: number): T;
export declare type ɵɵNgModuleDefWithMeta<T, Declarations, Imports, Exports> = ɵNgModuleDef<T>;
export declare function ɵɵNgOnChangesFeature<T>(definition: ɵDirectiveDef<T>): void;
export declare function ɵɵNgOnChangesFeature<T>(): DirectiveDefFeature;
export declare function ɵɵpipe(index: number, pipeName: string): any;
@ -1056,7 +1056,7 @@ export declare function ɵɵstylePropInterpolateV(prop: string, values: any[], v
export declare function ɵɵtemplate(index: number, templateFn: ComponentTemplate<any> | null, decls: number, vars: number, tagName?: string | null, attrsIndex?: number | null, localRefsIndex?: number | null, localRefExtractor?: LocalRefExtractor): void;
export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: ɵangular_packages_core_core_bo): TemplateRef<unknown> | null;
export declare function ɵɵtemplateRefExtractor(tNode: TNode, currentView: ɵangular_packages_core_core_bp): TemplateRef<unknown> | null;
export declare function ɵɵtext(index: number, value?: string): void;

4
goldens/size-tracking/aio-payloads.json
View File

@ -12,7 +12,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 2987,
"main-es2015": 450883,
"main-es2015": 450301,
"polyfills-es2015": 52630
}
}
@ -26,4 +26,4 @@
}
}
}
}
}

12
goldens/size-tracking/integration-payloads.json
View File

@ -12,8 +12,8 @@
"master": {
"uncompressed": {
"runtime-es2015": 1485,
"main-es2015": 16959,
"polyfills-es2015": 36938
"main-es2015": 17362,
"polyfills-es2015": 36657
}
}
},
@ -21,7 +21,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 1485,
"main-es2015": 147314,
"main-es2015": 147573,
"polyfills-es2015": 36571
}
}
@ -30,7 +30,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 1485,
"main-es2015": 135533,
"main-es2015": 136168,
"polyfills-es2015": 37248
}
}
@ -39,7 +39,7 @@
"master": {
"uncompressed": {
"runtime-es2015": 2289,
"main-es2015": 246044,
"main-es2015": 245351,
"polyfills-es2015": 36938,
"5-es2015": 751
}
@ -66,4 +66,4 @@
}
}
}
}
}

121
packages/core/src/render3/definition.ts
View File

@ -290,72 +290,65 @@ export function ɵɵdefineComponent<T>(componentDefinition: {
schemas?: SchemaMetadata[] | null;
}): never {
return noSideEffects(() => {
// Initialize ngDevMode. This must be the first statement in ɵɵdefineComponent.
// See the `initNgDevMode` docstring for more information.
(typeof ngDevMode === 'undefined' || ngDevMode) && initNgDevMode();
// Initialize ngDevMode. This must be the first statement in ɵɵdefineComponent.
// See the `initNgDevMode` docstring for more information.
(typeof ngDevMode === 'undefined' || ngDevMode) && initNgDevMode();
const type = componentDefinition.type;
const typePrototype = type.prototype;
const declaredInputs: {[key: string]: string} = {} as any;
const def: Mutable<ComponentDef<any>, keyof ComponentDef<any>> = {
type: type,
providersResolver: null,
decls: componentDefinition.decls,
vars: componentDefinition.vars,
factory: null,
template: componentDefinition.template || null!,
consts: componentDefinition.consts || null,
ngContentSelectors: componentDefinition.ngContentSelectors,
hostBindings: componentDefinition.hostBindings || null,
hostVars: componentDefinition.hostVars || 0,
hostAttrs: componentDefinition.hostAttrs || null,
contentQueries: componentDefinition.contentQueries || null,
declaredInputs: declaredInputs,
inputs: null!, // assigned in noSideEffects
outputs: null!, // assigned in noSideEffects
exportAs: componentDefinition.exportAs || null,
onChanges: null,
onInit: typePrototype.ngOnInit || null,
doCheck: typePrototype.ngDoCheck || null,
afterContentInit: typePrototype.ngAfterContentInit || null,
afterContentChecked: typePrototype.ngAfterContentChecked || null,
afterViewInit: typePrototype.ngAfterViewInit || null,
afterViewChecked: typePrototype.ngAfterViewChecked || null,
onDestroy: typePrototype.ngOnDestroy || null,
onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush,
directiveDefs: null!, // assigned in noSideEffects
pipeDefs: null!, // assigned in noSideEffects
selectors: componentDefinition.selectors || EMPTY_ARRAY,
viewQuery: componentDefinition.viewQuery || null,
features: componentDefinition.features as DirectiveDefFeature[] || null,
data: componentDefinition.data || {},
// TODO(misko): convert ViewEncapsulation into const enum so that it can be used directly in
// the next line. Also `None` should be 0 not 2.
encapsulation: componentDefinition.encapsulation || ViewEncapsulation.Emulated,
id: 'c',
styles: componentDefinition.styles || EMPTY_ARRAY,
_: null as never,
setInput: null,
schemas: componentDefinition.schemas || null,
tView: null,
};
const directiveTypes = componentDefinition.directives!;
const feature = componentDefinition.features;
const pipeTypes = componentDefinition.pipes!;
def.id += _renderCompCount++;
def.inputs = invertObject(componentDefinition.inputs, declaredInputs),
def.outputs = invertObject(componentDefinition.outputs),
feature && feature.forEach((fn) => fn(def));
def.directiveDefs = directiveTypes ?
() => (typeof directiveTypes === 'function' ? directiveTypes() : directiveTypes)
.map(extractDirectiveDef) :
null;
def.pipeDefs = pipeTypes ?
() => (typeof pipeTypes === 'function' ? pipeTypes() : pipeTypes).map(extractPipeDef) :
null;
const type = componentDefinition.type;
const typePrototype = type.prototype;
const declaredInputs: {[key: string]: string} = {} as any;
const def: Mutable<ComponentDef<any>, keyof ComponentDef<any>> = {
type: type,
providersResolver: null,
decls: componentDefinition.decls,
vars: componentDefinition.vars,
factory: null,
template: componentDefinition.template || null!,
consts: componentDefinition.consts || null,
ngContentSelectors: componentDefinition.ngContentSelectors,
hostBindings: componentDefinition.hostBindings || null,
hostVars: componentDefinition.hostVars || 0,
hostAttrs: componentDefinition.hostAttrs || null,
contentQueries: componentDefinition.contentQueries || null,
declaredInputs: declaredInputs,
inputs: null!, // assigned in noSideEffects
outputs: null!, // assigned in noSideEffects
exportAs: componentDefinition.exportAs || null,
onPush: componentDefinition.changeDetection === ChangeDetectionStrategy.OnPush,
directiveDefs: null!, // assigned in noSideEffects
pipeDefs: null!, // assigned in noSideEffects
selectors: componentDefinition.selectors || EMPTY_ARRAY,
viewQuery: componentDefinition.viewQuery || null,
features: componentDefinition.features as DirectiveDefFeature[] || null,
data: componentDefinition.data || {},
// TODO(misko): convert ViewEncapsulation into const enum so that it can be used
// directly in the next line. Also `None` should be 0 not 2.
encapsulation: componentDefinition.encapsulation || ViewEncapsulation.Emulated,
id: 'c',
styles: componentDefinition.styles || EMPTY_ARRAY,
_: null as never,
setInput: null,
schemas: componentDefinition.schemas || null,
tView: null,
};
const directiveTypes = componentDefinition.directives!;
const feature = componentDefinition.features;
const pipeTypes = componentDefinition.pipes!;
def.id += _renderCompCount++;
def.inputs = invertObject(componentDefinition.inputs, declaredInputs),
def.outputs = invertObject(componentDefinition.outputs),
feature && feature.forEach((fn) => fn(def));
def.directiveDefs = directiveTypes ?
() => (typeof directiveTypes === 'function' ? directiveTypes() : directiveTypes)
.map(extractDirectiveDef) :
null;
def.pipeDefs = pipeTypes ?
() =>
(typeof pipeTypes === 'function' ? pipeTypes() : pipeTypes).map(extractPipeDef) :
null;
return def as never;
});
return def as never;
}) as never;
}
/**

11
packages/core/src/render3/features/inherit_definition_feature.ts
View File

@ -78,17 +78,6 @@ export function ɵɵInheritDefinitionFeature(definition: DirectiveDef<any>|Compo
const defData = (definition as ComponentDef<any>).data;
defData.animation = (defData.animation || []).concat(superDef.data.animation);
}
// Inherit hooks
// Assume super class inheritance feature has already run.
writeableDef.afterContentChecked =
writeableDef.afterContentChecked || superDef.afterContentChecked;
writeableDef.afterContentInit = definition.afterContentInit || superDef.afterContentInit;
writeableDef.afterViewChecked = definition.afterViewChecked || superDef.afterViewChecked;
writeableDef.afterViewInit = definition.afterViewInit || superDef.afterViewInit;
writeableDef.doCheck = definition.doCheck || superDef.doCheck;
writeableDef.onDestroy = definition.onDestroy || superDef.onDestroy;
writeableDef.onInit = definition.onInit || superDef.onInit;
}
// Run parent features

62
packages/core/src/render3/features/ng_onchanges_feature.ts
View File

@ -11,14 +11,6 @@ import {SimpleChange, SimpleChanges} from '../../interface/simple_change';
import {EMPTY_OBJ} from '../empty';
import {DirectiveDef, DirectiveDefFeature} from '../interfaces/definition';
const PRIVATE_PREFIX = '__ngOnChanges_';
type OnChangesExpando = OnChanges&{
__ngOnChanges_: SimpleChanges|null|undefined;
// tslint:disable-next-line:no-any Can hold any value
[key: string]: any;
};
/**
* The NgOnChangesFeature decorates a component with support for the ngOnChanges
* lifecycle hook, so it should be included in any component that implements
@ -41,12 +33,15 @@ type OnChangesExpando = OnChanges&{
*
* @codeGenApi
*/
export function ɵɵNgOnChangesFeature<T>(): DirectiveDefFeature {
return NgOnChangesFeatureImpl;
}
export function ɵɵNgOnChangesFeature<T>(definition: DirectiveDef<T>): void {
export function NgOnChangesFeatureImpl<T>(definition: DirectiveDef<T>) {
if (definition.type.prototype.ngOnChanges) {
definition.setInput = ngOnChangesSetInput;
(definition as {onChanges: Function}).onChanges = wrapOnChanges();
}
return rememberChangeHistoryAndInvokeOnChangesHook;
}
// This option ensures that the ngOnChanges lifecycle hook will be inherited
@ -55,28 +50,37 @@ export function ɵɵNgOnChangesFeature<T>(definition: DirectiveDef<T>): void {
// tslint:disable-next-line:no-toplevel-property-access
(ɵɵNgOnChangesFeature as DirectiveDefFeature).ngInherit = true;
function wrapOnChanges() {
return function wrapOnChangesHook_inPreviousChangesStorage(this: OnChanges) {
const simpleChangesStore = getSimpleChangesStore(this);
const current = simpleChangesStore && simpleChangesStore.current;
/**
* This is a synthetic lifecycle hook which gets inserted into `TView.preOrderHooks` to simulate
* `ngOnChanges`.
*
* The hook reads the `NgSimpleChangesStore` data from the component instance and if changes are
* found it invokes `ngOnChanges` on the component instance.
*
* @param this Component instance. Because this function gets inserted into `TView.preOrderHooks`,
* it is guaranteed to be called with component instance.
*/
function rememberChangeHistoryAndInvokeOnChangesHook(this: OnChanges) {
const simpleChangesStore = getSimpleChangesStore(this);
const current = simpleChangesStore?.current;
if (current) {
const previous = simpleChangesStore!.previous;
if (previous === EMPTY_OBJ) {
simpleChangesStore!.previous = current;
} else {
// New changes are copied to the previous store, so that we don't lose history for inputs
// which were not changed this time
for (let key in current) {
previous[key] = current[key];
}
if (current) {
const previous = simpleChangesStore!.previous;
if (previous === EMPTY_OBJ) {
simpleChangesStore!.previous = current;
} else {
// New changes are copied to the previous store, so that we don't lose history for inputs
// which were not changed this time
for (let key in current) {
previous[key] = current[key];
}
simpleChangesStore!.current = null;
this.ngOnChanges(current);
}
};
simpleChangesStore!.current = null;
this.ngOnChanges(current);
}
}
function ngOnChangesSetInput<T>(
this: DirectiveDef<T>, instance: T, value: any, publicName: string, privateName: string): void {
const simpleChangesStore = getSimpleChangesStore(instance) ||
@ -102,6 +106,10 @@ function setSimpleChangesStore(instance: any, store: NgSimpleChangesStore): NgSi
return instance[SIMPLE_CHANGES_STORE] = store;
}
/**
* Data structure which is monkey-patched on the component instance and used by `ngOnChanges`
* life-cycle hook to track previous input values.
*/
interface NgSimpleChangesStore {
previous: SimpleChanges;
current: SimpleChanges|null;

59
packages/core/src/render3/hooks.ts
View File

@ -6,9 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, DoCheck, OnChanges, OnDestroy, OnInit} from '../interface/lifecycle_hooks';
import {assertEqual, assertNotEqual} from '../util/assert';
import {assertFirstCreatePass} from './assert';
import {NgOnChangesFeatureImpl} from './features/ng_onchanges_feature';
import {DirectiveDef} from './interfaces/definition';
import {TNode} from './interfaces/node';
import {FLAGS, HookData, InitPhaseState, LView, LViewFlags, PREORDER_HOOK_FLAGS, PreOrderHookFlags, TView} from './interfaces/view';
@ -31,20 +32,23 @@ import {getCheckNoChangesMode} from './state';
export function registerPreOrderHooks(
directiveIndex: number, directiveDef: DirectiveDef<any>, tView: TView): void {
ngDevMode && assertFirstCreatePass(tView);
const {onChanges, onInit, doCheck} = directiveDef;
const {ngOnChanges, ngOnInit, ngDoCheck} =
directiveDef.type.prototype as OnChanges & OnInit & DoCheck;
if (onChanges) {
(tView.preOrderHooks || (tView.preOrderHooks = [])).push(directiveIndex, onChanges);
(tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])).push(directiveIndex, onChanges);
if (ngOnChanges as Function | undefined) {
const wrappedOnChanges = NgOnChangesFeatureImpl(directiveDef);
(tView.preOrderHooks || (tView.preOrderHooks = [])).push(directiveIndex, wrappedOnChanges);
(tView.preOrderCheckHooks || (tView.preOrderCheckHooks = []))
.push(directiveIndex, wrappedOnChanges);
}
if (onInit) {
(tView.preOrderHooks || (tView.preOrderHooks = [])).push(-directiveIndex, onInit);
if (ngOnInit) {
(tView.preOrderHooks || (tView.preOrderHooks = [])).push(0 - directiveIndex, ngOnInit);
}
if (doCheck) {
(tView.preOrderHooks || (tView.preOrderHooks = [])).push(directiveIndex, doCheck);
(tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])).push(directiveIndex, doCheck);
if (ngDoCheck) {
(tView.preOrderHooks || (tView.preOrderHooks = [])).push(directiveIndex, ngDoCheck);
(tView.preOrderCheckHooks || (tView.preOrderCheckHooks = [])).push(directiveIndex, ngDoCheck);
}
}
@ -73,27 +77,36 @@ export function registerPostOrderHooks(tView: TView, tNode: TNode): void {
// hooks for projected components and directives must be called *before* their hosts.
for (let i = tNode.directiveStart, end = tNode.directiveEnd; i < end; i++) {
const directiveDef = tView.data[i] as DirectiveDef<any>;
if (directiveDef.afterContentInit) {
(tView.contentHooks || (tView.contentHooks = [])).push(-i, directiveDef.afterContentInit);
const lifecycleHooks: AfterContentInit&AfterContentChecked&AfterViewInit&AfterViewChecked&
OnDestroy = directiveDef.type.prototype;
const {
ngAfterContentInit,
ngAfterContentChecked,
ngAfterViewInit,
ngAfterViewChecked,
ngOnDestroy
} = lifecycleHooks;
if (ngAfterContentInit) {
(tView.contentHooks || (tView.contentHooks = [])).push(-i, ngAfterContentInit);
}
if (directiveDef.afterContentChecked) {
(tView.contentHooks || (tView.contentHooks = [])).push(i, directiveDef.afterContentChecked);
(tView.contentCheckHooks || (tView.contentCheckHooks = []))
.push(i, directiveDef.afterContentChecked);
if (ngAfterContentChecked) {
(tView.contentHooks || (tView.contentHooks = [])).push(i, ngAfterContentChecked);
(tView.contentCheckHooks || (tView.contentCheckHooks = [])).push(i, ngAfterContentChecked);
}
if (directiveDef.afterViewInit) {
(tView.viewHooks || (tView.viewHooks = [])).push(-i, directiveDef.afterViewInit);
if (ngAfterViewInit) {
(tView.viewHooks || (tView.viewHooks = [])).push(-i, ngAfterViewInit);
}
if (directiveDef.afterViewChecked) {
(tView.viewHooks || (tView.viewHooks = [])).push(i, directiveDef.afterViewChecked);
(tView.viewCheckHooks || (tView.viewCheckHooks = [])).push(i, directiveDef.afterViewChecked);
if (ngAfterViewChecked) {
(tView.viewHooks || (tView.viewHooks = [])).push(i, ngAfterViewChecked);
(tView.viewCheckHooks || (tView.viewCheckHooks = [])).push(i, ngAfterViewChecked);
}
if (directiveDef.onDestroy != null) {
(tView.destroyHooks || (tView.destroyHooks = [])).push(i, directiveDef.onDestroy);
if (ngOnDestroy != null) {
(tView.destroyHooks || (tView.destroyHooks = [])).push(i, ngOnDestroy);
}
}
}

7
packages/core/src/render3/instructions/shared.ts
View File

@ -7,6 +7,7 @@
*/
import {Injector} from '../../di';
import {ErrorHandler} from '../../error_handler';
import {DoCheck, OnChanges, OnInit} from '../../interface/lifecycle_hooks';
import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, SchemaMetadata} from '../../metadata/schema';
import {ViewEncapsulation} from '../../metadata/view';
import {validateAgainstEventAttributes, validateAgainstEventProperties} from '../../sanitization/sanitization';
@ -1166,9 +1167,11 @@ export function resolveDirectives(
if (def.hostBindings !== null || def.hostAttrs !== null || def.hostVars !== 0)
tNode.flags |= TNodeFlags.hasHostBindings;
const lifeCycleHooks: OnChanges&OnInit&DoCheck = def.type.prototype;
// Only push a node index into the preOrderHooks array if this is the first
// pre-order hook found on this node.
if (!preOrderHooksFound && (def.onChanges || def.onInit || def.doCheck)) {
if (!preOrderHooksFound &&
(lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngOnInit || lifeCycleHooks.ngDoCheck)) {
// We will push the actual hook function into this array later during dir instantiation.
// We cannot do it now because we must ensure hooks are registered in the same
// order that directives are created (i.e. injection order).
@ -1176,7 +1179,7 @@ export function resolveDirectives(
preOrderHooksFound = true;
}
if (!preOrderCheckHooksFound && (def.onChanges || def.doCheck)) {
if (!preOrderCheckHooksFound && (lifeCycleHooks.ngOnChanges || lifeCycleHooks.ngDoCheck)) {
(tView.preOrderCheckHooks || (tView.preOrderCheckHooks = []))
.push(tNode.index - HEADER_OFFSET);
preOrderCheckHooksFound = true;

10
packages/core/src/render3/interfaces/definition.ts
View File

@ -250,16 +250,6 @@ export interface DirectiveDef<T> {
*/
readonly factory: FactoryFn<T>|null;
/* The following are lifecycle hooks for this component */
readonly onChanges: (() => void)|null;
readonly onInit: (() => void)|null;
readonly doCheck: (() => void)|null;
readonly afterContentInit: (() => void)|null;
readonly afterContentChecked: (() => void)|null;
readonly afterViewInit: (() => void)|null;
readonly afterViewChecked: (() => void)|null;
readonly onDestroy: (() => void)|null;
/**
* The features applied to this directive
*/

94
packages/core/test/acceptance/lifecycle_spec.ts
View File

@ -1124,6 +1124,100 @@ describe('onChanges', () => {
});
});
describe('meta-programing', () => {
it('should allow adding lifecycle hook methods any time before first instance creation', () => {
const events: any[] = [];
@Component({template: `<child name="value"></child>`})
class App {
}
@Component({selector: 'child', template: `empty`})
class Child {
@Input() name: string = '';
}
const ChildPrototype = Child.prototype as any;
ChildPrototype.ngOnInit = () => events.push('onInit');
ChildPrototype.ngOnChanges = (e: SimpleChanges) => {
const name = e['name'];
expect(name.previousValue).toEqual(undefined);
expect(name.currentValue).toEqual('value');
expect(name.firstChange).toEqual(true);
events.push('ngOnChanges');
};
ChildPrototype.ngDoCheck = () => events.push('ngDoCheck');
ChildPrototype.ngAfterContentInit = () => events.push('ngAfterContentInit');
ChildPrototype.ngAfterContentChecked = () => events.push('ngAfterContentChecked');
ChildPrototype.ngAfterViewInit = () => events.push('ngAfterViewInit');
ChildPrototype.ngAfterViewChecked = () => events.push('ngAfterViewChecked');
ChildPrototype.ngOnDestroy = () => events.push('ngOnDestroy');
TestBed.configureTestingModule({
declarations: [App, Child],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
fixture.destroy();
expect(events).toEqual([
'ngOnChanges', 'onInit', 'ngDoCheck', 'ngAfterContentInit', 'ngAfterContentChecked',
'ngAfterViewInit', 'ngAfterViewChecked', 'ngOnDestroy'
]);
});
it('should allow adding lifecycle hook methods with inheritance any time before first instance creation',
() => {
const events: any[] = [];
@Component({template: `<child name="value"></child>`})
class App {
}
class BaseChild {}
@Component({selector: 'child', template: `empty`})
class Child extends BaseChild {
@Input() name: string = '';
}
// These are defined on the base class
const BasePrototype = BaseChild.prototype as any;
BasePrototype.ngOnInit = () => events.push('onInit');
BasePrototype.ngOnChanges = (e: SimpleChanges) => {
const name = e['name'];
expect(name.previousValue).toEqual(undefined);
expect(name.currentValue).toEqual('value');
expect(name.firstChange).toEqual(true);
events.push('ngOnChanges');
};
// These will be overwritten later
BasePrototype.ngDoCheck = () => events.push('Expected to be overbidden');
BasePrototype.ngAfterContentInit = () => events.push('Expected to be overbidden');
// These are define on the concrete class
const ChildPrototype = Child.prototype as any;
ChildPrototype.ngDoCheck = () => events.push('ngDoCheck');
ChildPrototype.ngAfterContentInit = () => events.push('ngAfterContentInit');
ChildPrototype.ngAfterContentChecked = () => events.push('ngAfterContentChecked');
ChildPrototype.ngAfterViewInit = () => events.push('ngAfterViewInit');
ChildPrototype.ngAfterViewChecked = () => events.push('ngAfterViewChecked');
ChildPrototype.ngOnDestroy = () => events.push('ngOnDestroy');
TestBed.configureTestingModule({
declarations: [App, Child],
});
const fixture = TestBed.createComponent(App);
fixture.detectChanges();
fixture.destroy();
expect(events).toEqual([
'ngOnChanges', 'onInit', 'ngDoCheck', 'ngAfterContentInit', 'ngAfterContentChecked',
'ngAfterViewInit', 'ngAfterViewChecked', 'ngOnDestroy'
]);
});
});
it('should call all hooks in correct order when several directives on same node', () => {
let log: string[] = [];

9
packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
View File

@ -200,6 +200,9 @@
{
"name": "getPreviousOrParentTNode"
},
{
"name": "getSimpleChangesStore"
},
{
"name": "getTView"
},
@ -281,6 +284,9 @@
{
"name": "nextNgElementId"
},
{
"name": "ngOnChangesSetInput"
},
{
"name": "noSideEffects"
},
@ -293,6 +299,9 @@
{
"name": "refreshView"
},
{
"name": "rememberChangeHistoryAndInvokeOnChangesHook"
},
{
"name": "renderComponent"
},

9
packages/core/test/bundling/hello_world/bundle.golden_symbols.json
View File

@ -137,6 +137,9 @@
{
"name": "getPreviousOrParentTNode"
},
{
"name": "getSimpleChangesStore"
},
{
"name": "includeViewProviders"
},
@ -176,6 +179,9 @@
{
"name": "nextNgElementId"
},
{
"name": "ngOnChangesSetInput"
},
{
"name": "refreshComponent"
},
@ -185,6 +191,9 @@
{
"name": "refreshView"
},
{
"name": "rememberChangeHistoryAndInvokeOnChangesHook"
},
{
"name": "renderComponent"
},

9
packages/core/test/bundling/todo/bundle.golden_symbols.json
View File

@ -392,6 +392,9 @@
{
"name": "getSelectedIndex"
},
{
"name": "getSimpleChangesStore"
},
{
"name": "getSymbolIterator"
},
@ -548,6 +551,9 @@
{
"name": "nextNgElementId"
},
{
"name": "ngOnChangesSetInput"
},
{
"name": "noSideEffects"
},
@ -569,6 +575,9 @@
{
"name": "registerPostOrderHooks"
},
{
"name": "rememberChangeHistoryAndInvokeOnChangesHook"
},
{
"name": "removeFromArray"
},