Angular ngOnChanges hook学习笔记

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

Events：如 click, change, input, submit 等用户事件
XMLHttpRequests：比如从远端服务获取数据
Timers：比如 JavaScript 的自有 API setTimeout(), setInterval()

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

Respond when Angular sets or resets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.
Note that this happens very frequently, so any operation you perform here impacts performance significantly.

看一个例子：子组件实现了Change detect hook：

子组件的bankName, 绑定到了父组件的bankName属性上：

完整源代码：

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 AngularnormalizedBankName: string;
}@Component({selector: 'app',template: `<bank-account [bankName]="bankName" account-id="4747"></bank-account>`
})
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接口：

第一次触发：

然后父组件的模板第二次被渲染，bankName变成Jerry2：

此时再次refreshView之后，最新的Jerry2和之前的Jerry都记录在SimpleChange数据结构里了：

更多Jerry的原创文章，尽在：“汪子熙”:

Angular ngOnChanges hook学习笔记相关推荐

Angular官网学习笔记
Angular官网学习笔记一.Angular概述 **什么是Angular:**一个基于TypeScript构建的开发平台包括: 一个基于组件的框架,用于构建可伸缩的Web应用一组完美集成的库,涵 ...
PC微信hook学习笔记（一）—— 获取个人信息
PC微信hook学习笔记(一)-- 获取微信个人信息 1 起步 2. 获取基址 2.1 用CE查看个人信息 2.1.1 获取昵称基址 2.1.2 dll模块基址 2.2 用OD查看个人信息 2.3 内 ...
Frida—HOOK 学习笔记2
Android部分基础知识 1)安卓分层简单提一下安卓分层,这个点知道了更好,不知道也无所谓.毕竟我们不是开发,只是为了避免下述情况: 我要学习so文件HOOK.一波百度 "HOOK s ...
Frida—HOOK 学习笔记1
JAVA层HOOK 在开始之前,依旧是熟悉的工具官方文档.因本人英文水平不高,大佬们可通过官网(https://frida.re/docs/home/)或看雪(https://bbs.pediy.co ...
Angular 依赖注入学习笔记之工厂函数的用法
网址:https://angular.institute/di We can transfer any data through our apps, transform it and replace ...
Angular input decorator学习笔记
https://angular.io/api/core/Input Input decorator只能用在Angular class字段里, 用于指定元数据,将class字段指定成input prop ...
Angular数据绑定的学习笔记
https://angular.io/guide/property-binding Property binding in Angular helps you set values for prope ...
2020国庆节 Angular structual 指令学习笔记(＜ng-template＞) 包含语法糖解糖过程
Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, ty ...
angular基本知识学习笔记 - Component的基本概念
官网地址:https://angular.io/guide/architecture Angular is a platform and framework for building single-p ...

Angular ngOnChanges hook学习笔记

Angular ngOnChanges hook学习笔记相关推荐

最新文章

热门文章