+ {{comment}} +
+ ` }) -export class AfterContentComponent - implements AfterContentChecked, AfterContentInit, AfterViewInit { - - private _logger:LoggerService; - - constructor(logger:LoggerService){ - this._logger = logger; - logger.log('AfterContent ctor: ' + this._getMessage()); - } +// #docregion hooks +export class AfterContentComponent implements AfterContentChecked, AfterContentInit { + private _prevHero = ''; // Query for a CONTENT child of type `ChildComponent` @ContentChild(ChildComponent) contentChild: ChildComponent; - // Query for a VIEW child of type`ChildComponent` - // No such VIEW child exists! - // This component holds content but no view of that type. - @ViewChild(ChildComponent) viewChild: ChildComponent; +// #enddocregion hooks + constructor(private _logger:LoggerService){ + this._logIt('AfterContent constructor'); + } - - ///// Hooks +// #docregion hooks ngAfterContentInit() { - // contentChild is set after the content has been initialized - this._logger.log('AfterContentInit: ' + this._getMessage()); + // viewChild is set after the view has been initialized + this._logIt('AfterContentInit'); + this._doSomething(); } - ngAfterViewInit() { - this._logger.log(`AfterViewInit: There is ${this.viewChild ? 'a' : 'no'} view child`); - } - - private _prevHero:string; ngAfterContentChecked() { - // contentChild is updated after the content has been checked - // Called frequently; only report when the hero changes - if (!this.contentChild || this._prevHero === this.contentChild.hero) {return;} - this._prevHero = this.contentChild.hero; - this._logger.log('AfterContentChecked: ' + this._getMessage()); + // viewChild is updated after the view has been checked + if (this._prevHero === this.contentChild.hero) { + this._logIt('AfterContentChecked (no change)'); + } else { + this._prevHero = this.contentChild.hero; + this._logIt('AfterContentChecked'); + this._doSomething(); + } + } +// #enddocregion hooks + + comment = ''; + +// #docregion do-something + + // This surrogate for real business logic sets the `comment` + private _doSomething() { + this.comment = this.contentChild.hero.length > 10 ? "That's a long name" : ''; } - private _getMessage(): string { - let cmp = this.contentChild; - return cmp ? `"${cmp.hero}" child content` : 'no child content'; + private _logIt(method:string){ + let vc = this.contentChild; + let message = `${method}: ${vc ? vc.hero:'no'} child view` + this._logger.log(message); } - +// #docregion hooks + // ... } +// #enddocregion hooks -/***************************************/ - +////////////// @Component({ selector: 'after-content-parent', template: `+ {{comment}} +
+ `, + + directives: [ChildViewComponent] +}) +// #docregion hooks +export class AfterViewComponent implements AfterViewChecked, AfterViewInit { + private _prevHero = ''; + + // Query for a VIEW child of type `ChildViewComponent` + @ViewChild(ChildViewComponent) viewChild: ChildViewComponent; + +// #enddocregion hooks + constructor(private _logger:LoggerService){ + this._logIt('AfterView constructor'); + } + +// #docregion hooks + ngAfterViewInit() { + // viewChild is set after the view has been initialized + this._logIt('AfterViewInit'); + this._doSomething(); + } + + ngAfterViewChecked() { + // viewChild is updated after the view has been checked + if (this._prevHero === this.viewChild.hero) { + this._logIt('AfterViewChecked (no change)'); + } else { + this._prevHero = this.viewChild.hero; + this._logIt('AfterViewChecked'); + this._doSomething(); + } + } +// #enddocregion hooks + + comment = ''; + +// #docregion do-something + // This surrogate for real business logic sets the `comment` + private _doSomething() { + let c = this.viewChild.hero.length > 10 ? "That's a long name" : ''; + if (c !== this.comment) { + // Wait a tick because the component's view has already been checked + setTimeout(() => this.comment = c, 0); + } + } +// #enddocregion do-something + + private _logIt(method:string){ + let vc = this.viewChild; + let message = `${method}: ${vc ? vc.hero:'no'} child view` + this._logger.log(message); + } +// #docregion hooks + // ... +} +// #enddocregion hooks + +////////////// @Component({ selector: 'after-view-parent', template: `{{hero.name}} can {{power}}
+ +| Power: | |
| Hero.name: |
{{hero.name}} can {{power}}
@@ -24,61 +24,51 @@ export class Hero { 'p {background: Yellow; padding: 8px; margin-top: 8px}' ] }) -export class MyHeroComponent implements OnChanges { +export class OnChangesComponent implements OnChanges { +// #docregion inputs @Input() hero: Hero; @Input() power: string; - @Input() reset: {}; +// #enddocregion inputs changeLog:string[] = []; + // #docregion ng-on-changes ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { - - // Empty the changeLog whenever 'reset' property changes - // hint: this is a way to respond programmatically to external value changes. - if (changes['reset']) { this.changeLog.length = 0; } - for (let propName in changes) { let prop = changes[propName]; - let cur = JSON.stringify(prop.currentValue) - let prev = JSON.stringify(prop.previousValue); // first time is {}; after is integer + let cur = JSON.stringify(prop.currentValue) + let prev = JSON.stringify(prop.previousValue); this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); } } + // #enddocregion ng-on-changes + + reset() { this.changeLog.length = 0; } } /***************************************/ @Component({ selector: 'on-changes-parent', - template: ` -Now you see my hero, {{name}}
', @@ -23,23 +33,23 @@ let nextId = 1; }) // Don't HAVE to mention the Lifecycle Hook interfaces // unless we want typing and tool support. -export class PeekABooComponent - implements OnChanges, OnInit,AfterContentInit,AfterContentChecked, - AfterViewInit, AfterViewChecked, OnDestroy { +export class PeekABooComponent extends PeekABoo implements + OnChanges, OnInit, DoCheck, + AfterContentInit,AfterContentChecked, + AfterViewInit, AfterViewChecked, + OnDestroy { @Input() name:string; - private _afterContentCheckedCounter = 1; - private _afterViewCheckedCounter = 1; - private _id = nextId++; - private _logger:LoggerService; - private _onChangesCounter = 1; private _verb = 'initialized'; - constructor(logger:LoggerService){ - this._logger = logger; + constructor(logger:LoggerService) { + super(logger); + + let is = this.name ? 'is' : 'is not'; + this._logIt(`name ${is} known at construction`); } - // only called if there is an @input variable set by parent. + // only called for/if there is an @input variable set by parent. ngOnChanges(changes: {[propertyName: string]: SimpleChange}){ let changesMsgs:string[] = [] for (let propName in changes) { @@ -50,49 +60,25 @@ export class PeekABooComponent changesMsgs.push(propName + ' ' + this._verb); } } - this._logIt(`onChanges (${this._onChangesCounter++}): ${changesMsgs.join('; ')}`); + this._logIt(`OnChanges: ${changesMsgs.join('; ')}`); this._verb = 'changed'; // next time it will be a change } - ngOnInit() { - this._logIt(`onInit`); - } - - ngAfterContentInit(){ - this._logIt(`afterContentInit`); - } - - // Called after every change detection check - // of the component (directive) CONTENT // Beware! Called frequently! - ngAfterContentChecked(){ - let counter = this._afterContentCheckedCounter++; - let msg = `afterContentChecked (${counter})`; - this._logIt(msg); - } + // Called in every change detection cycle anywhere on the page + ngDoCheck(){ this._logIt(`DoCheck`); } - ngAfterViewInit(){ - this._logIt(`afterViewInit`); - } + ngAfterContentInit(){ this._logIt(`AfterContentInit`); } - // Called after every change detection check - // of the component (directive) VIEW // Beware! Called frequently! + // Called in every change detection cycle anywhere on the page + ngAfterContentChecked(){ this._logIt(`AfterContentChecked`); } - ngAfterViewChecked(){ - let counter = this._afterViewCheckedCounter++; - let msg = `afterViewChecked (${counter})`; - this._logIt(msg); - } + ngAfterViewInit(){ this._logIt(`AfterViewInit`); } - ngOnDestroy() { - this._logIt(`onDestroy`); - } + // Beware! Called frequently! + // Called in every change detection cycle anywhere on the page + ngAfterViewChecked(){ this._logIt(`AfterViewChecked`); } - private _logIt(msg:string){ - // Don't tick or else - // the AfterContentChecked and AfterViewChecked recurse. - // Let parent call tick() - this._logger.log(`#${this._id } ${msg}`, true); - } -} \ No newline at end of file + ngOnDestroy() { this._logIt(`OnDestroy`); } +} diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts index 9a82b2faa8..6fb97b2935 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts +++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts @@ -8,48 +8,52 @@ import {Spy} from './spy.directive'; template: `+ + + +
` + +// #docregion template + `