Angular ngOnChanges hook学习笔记

简介: Angular ngOnChanges hook学习笔记

只有这三种事件才会导致Angular视图的更新,都是异步事件。


Events:如 click, change, input, submit 等用户事件

XMLHttpRequests:比如从远端服务获取数据

Timers: 比如 JavaScript 的自有 API setTimeout(), setInterval()

https://angular.io/guide/lifecycle-hooks



image.pngimage.png完整源代码:export class BankAccount implements OnChanges{

 ngOnChanges(changes: SimpleChanges): void {

   debugger;

 }

 // This property is bound using its original name.

 @Input()  

 bankName: string;

 // this property value is bound to a different property name

 // when this component is instantiated in a template.

 @Input('account-id')  

 

 id: string;

 // this property is not bound, and is not automatically updated by Angular

 normalizedBankName: string;

}

@Component({

 selector: 'app',

 template: `

 

 `

})

export class App implements OnInit, AfterViewInit{

 _bankName = 'Jerry';

 ngAfterViewInit(): void {

   this._bankName = 'Jerry2';

 }

 get bankName(){

   debugger;

   return this._bankName;

 }

 ngOnInit(): void {

   debugger;

 }

}父组件的bankName,在OnInit和OnAfterViewInit时都会变化,这也会触发子组件的ngOnChange接口:image.pngimage.pngimage.pngimage.png

相关文章
|
7月前
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
72 0
|
7月前
|
前端开发 JavaScript API
Angular Change Detection 的学习笔记
Angular Change Detection 的学习笔记
38 0
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
118 0
Angular Universal 学习笔记
|
JavaScript
Angular Form (响应式Form) 学习笔记
Angular Form (响应式Form) 学习笔记
153 0
Angular Form (响应式Form) 学习笔记
|
JSON API 数据格式
Angular CLI builder 学习笔记
Angular CLI builder 学习笔记
103 0
Angular CLI builder 学习笔记
|
JavaScript 测试技术 API
Angular library 学习笔记
Angular library 学习笔记
173 0
Angular library 学习笔记
|
设计模式 JavaScript 前端开发
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
291 0
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
|
JavaScript 开发者
Angular 依赖注入学习笔记之工厂函数的用法
Angular 依赖注入学习笔记之工厂函数的用法
Angular 依赖注入学习笔记之工厂函数的用法
Angular Jasmine 里一些常用概念学习笔记 - describe, it, beforeEach的用法
describe: 定义一个test spec group,用来包裹多个specs,也称为suite:
257 0
Angular Jasmine 里一些常用概念学习笔记 - describe, it, beforeEach的用法

热门文章

最新文章