604c8bbad5
BREAKING CHANGE: Previously, components that would implement lifecycle interfaces would include methods like "onChanges" or "afterViewInit." Given that components were at risk of using such names without realizing that Angular would call the methods at different points of the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods, far reducing the risk of an accidental name collision. To fix, just rename these methods: * onInit * onDestroy * doCheck * onChanges * afterContentInit * afterContentChecked * afterViewInit * afterViewChecked * _Router Hooks_ * onActivate * onReuse * onDeactivate * canReuse * canDeactivate To: * ngOnInit, * ngOnDestroy, * ngDoCheck, * ngOnChanges, * ngAfterContentInit, * ngAfterContentChecked, * ngAfterViewInit, * ngAfterViewChecked * _Router Hooks_ * routerOnActivate * routerOnReuse * routerOnDeactivate * routerCanReuse * routerCanDeactivate The names of lifecycle interfaces and enums have not changed, though interfaces have been updated to reflect the new method names. Closes #5036
1.6 KiB
@cheatsheetSection Directive and component change detection and lifecycle hooks @cheatsheetIndex 8 @description (implemented as class methods)
@cheatsheetItem
constructor(myService: MyService, ...) { ... }|constructor(myService: MyService, ...)
The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
@cheatsheetItem
ngOnChanges(changeRecord) { ... }|ngOnChanges(changeRecord)
Called after every change to input properties and before processing content or child views.
@cheatsheetItem
ngOnInit() { ... }|ngOnInit()
Called after the constructor, initializing input properties, and the first call to ngOnChanges.
@cheatsheetItem
ngDoCheck() { ... }|ngDoCheck()
Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
@cheatsheetItem
ngAfterContentInit() { ... }|ngAfterContentInit()
Called after ngOnInit when the component's or directive's content has been initialized.
@cheatsheetItem
ngAfterContentChecked() { ... }|ngAfterContentChecked()
Called after every check of the component's or directive's content.
@cheatsheetItem
ngAfterViewInit() { ... }|ngAfterViewInit()
Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
@cheatsheetItem
ngAfterViewChecked() { ... }|ngAfterViewChecked()
Called after every check of the component's view. Applies to components only.
@cheatsheetItem
ngOnDestroy() { ... }|ngOnDestroy()
Called once, before the instance is destroyed.