{{comment}}
+ ''' +// #enddocregion template + ) +// #docregion hooks +class AfterContentComponent implements AfterContentChecked, AfterContentInit { + String _prevHero = ''; + String comment = ''; + + // Query for a CONTENT child of type `ChildComponent` + @ContentChild(ChildComponent) ChildComponent contentChild; + +// #enddocregion hooks + final LoggerService _logger; + + AfterContentComponent(this._logger) { + _logIt('AfterContent constructor'); + } + +// #docregion hooks + ngAfterContentInit() { + // contentChild is set after the content has been initialized + _logIt('AfterContentInit'); + _doSomething(); + } + + ngAfterContentChecked() { + // contentChild is updated after the content has been checked + if (_prevHero == contentChild?.hero) { + _logIt('AfterContentChecked (no change)'); + } else { + _prevHero = contentChild?.hero; + _logIt('AfterContentChecked'); + _doSomething(); + } + } +// #enddocregion hooks +// #docregion do-something + /// This surrogate for real business logic; sets the `comment` + void _doSomething() { + comment = contentChild.hero.length > 10 ? "That's a long name" : ''; + } +// #enddocregion do-something + + void _logIt(String method) { + var child = contentChild; + var message = "${method}: ${child?.hero ?? 'no'} child content"; + _logger.log(message); + } +// #docregion hooks + // ... +} +// #enddocregion hooks + +////////////// +@Component( + selector: 'after-content-parent', +// #docregion parent-template + template: ''' +{{comment}}
''', +// #enddocregion template + directives: const [ChildViewComponent]) +// #docregion hooks +class AfterViewComponent implements AfterViewChecked, AfterViewInit { + var _prevHero = ''; + + // Query for a VIEW child of type `ChildViewComponent` + @ViewChild(ChildViewComponent) ChildViewComponent viewChild; + +// #enddocregion hooks + final LoggerService _logger; - // Query for a VIEW child of type `ChildComponent` - @ViewChild(ChildComponent) - ChildComponent viewChild; - - String _prevHero; - - AfterViewParentComponent(this._logger) { - hookLog = _logger.logs; - _logger.log('AfterView ctor: $message'); - } - - bool get _hasContentChild => contentChild != null; - bool get _hasViewChild => viewChild != null; - - ///// Hooks - ngAfterContentInit() { - _logger.log( - 'AfterContentInit: There is ${ _hasContentChild ? 'a' : 'no'} content child'); + AfterViewComponent(this._logger) { + _logIt('AfterView constructor'); } +// #docregion hooks ngAfterViewInit() { // viewChild is set after the view has been initialized - _logger.log('AfterViewInit: $message'); + _logIt('AfterViewInit'); + _doSomething(); } ngAfterViewChecked() { // viewChild is updated after the view has been checked - // Called frequently; only report when the hero changes - if (!_hasViewChild || _prevHero == viewChild.hero) return; - _prevHero = viewChild.hero; - _logger.log('AfterViewChecked: $message'); + if (_prevHero == viewChild.hero) { + _logIt('AfterViewChecked (no change)'); + } else { + _prevHero = viewChild.hero; + _logIt('AfterViewChecked'); + _doSomething(); + } + } +// #enddocregion hooks + + String comment = ''; + +// #docregion do-something + // This surrogate for real business logic sets the `comment` + void _doSomething() { + var c = viewChild.hero.length > 10 ? "That's a long name" : ''; + if (c != comment) { + // Wait a tick because the component's view has already been checked + _logger.tick().then((_) { comment = c; }); + } + } +// #enddocregion do-something + + void _logIt(String method) { + var child = viewChild; + var message = "${method}: ${child != null ? child.hero:'no'} child view"; + _logger.log(message); + } +// #docregion hooks + // ... +} +// #enddocregion hooks + +////////////// +@Component( + selector: 'after-view-parent', + template: ''' +{{hero.name}} can {{power}}
+ +{{hero.name}} can {{power}}
@@ -24,58 +23,48 @@ class Hero { '.hero {background: LightYellow; padding: 8px; margin-top: 8px}', 'p {background: Yellow; padding: 8px; margin-top: 8px}' ]) -class MyHeroComponent implements OnChanges { +class OnChangesComponent implements OnChanges { +// #docregion inputs @Input() Hero hero; @Input() String power; - @Input() bool reset; +// #enddocregion inputs + List| Power: | |
| Hero.name: |
Now you see my hero, {{name}}
', styles: const ['p {background: LightYellow; padding: 8px}']) -class PeekABooComponent +// Don't HAVE to mention the Lifecycle Hook interfaces +// unless we want typing and tool support. +class PeekABooComponent extends PeekABoo implements OnChanges, OnInit, + DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, @@ -23,12 +44,13 @@ class PeekABooComponent int _afterContentCheckedCounter = 1; int _afterViewCheckedCounter = 1; - int _id = nextId++; - LoggerService _logger; int _onChangesCounter = 1; String _verb = 'initialized'; - PeekABooComponent(this._logger); + PeekABooComponent(LoggerService logger) : super(logger) { + var _is = name != null ? 'is' : 'is not'; + _logIt('name $_is known at construction'); + } // Only called if there is an @input variable set by parent. ngOnChanges(Map- - - -
` + -// #docregion template - `