81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
|
// #docregion
|
||
|
|
import {
|
||
|
|
Component, Input, Output,
|
||
|
|
AfterContentInit, ContentChild,
|
||
|
|
AfterViewChecked, AfterViewInit, ViewChild
|
||
|
|
} from 'angular2/core';
|
||
|
|
|
||
|
|
import {ChildComponent} from './child.component';
|
||
|
|
import {LoggerService} from './logger.service';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'after-view-parent',
|
||
|
|
template: `
|
||
|
|
<div class="parent">
|
||
|
|
<h2>AfterView</h2>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<input [(ngModel)]="hero">
|
||
|
|
<button (click)="showChild = !showChild">Toggle child view</button>
|
||
|
|
|
||
|
|
<my-child *ngIf="showChild" [hero]="hero"></my-child>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4>-- Lifecycle Hook Log --</h4>
|
||
|
|
<div *ngFor="#msg of hookLog">{{msg}}</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
styles: ['.parent {background: burlywood; padding: 8px; margin:100px 8px;}'],
|
||
|
|
directives: [ChildComponent],
|
||
|
|
providers:[LoggerService]
|
||
|
|
})
|
||
|
|
export class AfterViewParentComponent
|
||
|
|
implements AfterContentInit, AfterViewChecked, AfterViewInit {
|
||
|
|
|
||
|
|
private _logger:LoggerService;
|
||
|
|
|
||
|
|
constructor(logger:LoggerService){
|
||
|
|
this._logger = logger;
|
||
|
|
this.hookLog = logger.logs;
|
||
|
|
logger.log('AfterView ctor: ' + this._getMessage());
|
||
|
|
}
|
||
|
|
|
||
|
|
hookLog:string[];
|
||
|
|
hero = 'Magneta';
|
||
|
|
showChild = true;
|
||
|
|
|
||
|
|
// Query for a CONTENT child of type `ChildComponent`
|
||
|
|
// No such CONTENT child exists!
|
||
|
|
// This component holds a view but no content of that type.
|
||
|
|
@ContentChild(ChildComponent) contentChild: ChildComponent;
|
||
|
|
|
||
|
|
// Query for a VIEW child of type `ChildComponent`
|
||
|
|
@ViewChild(ChildComponent) viewChild: ChildComponent;
|
||
|
|
|
||
|
|
|
||
|
|
///// Hooks
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this._logger.log(`AfterContentInit: There is ${this.contentChild ? 'a' : 'no'} content child`);
|
||
|
|
}
|
||
|
|
|
||
|
|
ngAfterViewInit() {
|
||
|
|
// viewChild is set after the view has been initialized
|
||
|
|
this._logger.log('AfterViewInit: ' + this._getMessage());
|
||
|
|
}
|
||
|
|
|
||
|
|
private _prevHero:string;
|
||
|
|
ngAfterViewChecked() {
|
||
|
|
// viewChild is updated after the view has been checked
|
||
|
|
// Called frequently; only report when the hero changes
|
||
|
|
if (!this.viewChild || this._prevHero === this.viewChild.hero) {return;}
|
||
|
|
this._prevHero = this.viewChild.hero;
|
||
|
|
this._logger.log('AfterViewChecked: ' + this._getMessage());
|
||
|
|
}
|
||
|
|
|
||
|
|
private _getMessage(): string {
|
||
|
|
let cmp = this.viewChild;
|
||
|
|
return cmp ? `"${cmp.hero}" child view` : 'no child view';
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|