OnChanges
当检测该i组件或者指令的输入属性发生变化,Angular会调用ngOnChanges方法。
import {OnChanges,Input,SimpleChanges} from '@angular/core'
export class LearnComponent implements Onchanges{
//该组件包含两个输入属性,当属性发生变化时,调用ngOnChanges
@Input() hero:Hero
@Input() power:string
ngOnchanges(changes:SimpleChanges){
console.log("componet onChanges")
console.log(changes)
for(let propName in changes){
let chng = changes[propName]
let cur = JSON.stringify(chng.currentValue)
let prev = JSON.stringify(chng.previousValue)
console.log('current value'+cur)
console.log('previous value' + prev)
}
}
}
//在宿主OnChangesParentComponent中绑定
<app-learn [hero]="hero" [power] = "power"></app-learn>
//值得注意的时,即使hero.name发生变化,ngOnChanges也不会触发,
//因为hero属性的值是对hero对象的引用,即使hero.name发生变化,因为它的引用没有变化,所以不会触发 ngOnChanges钩子
OnInit,OnDestroy
component 初始化和销毁的时候调用,OnDestroy可以用来释放内存
import {OnInit,Component,OnDestroy} from '@angular/core'
@Component({})
export class LearnComponent implements OnInit,OnDestroy{
ngOnInit(){
console.log('component OnInit')
}
ngOndestroy(){
console.loe('component OnDestroy')
}
}
DoCheck
检测哪些被OnChanges忽略的更改。此钩子开销非常大,尽量轻量级
import {DoCheck} from '@angular/core'
@Component({})
export class LearnComponent implements OnCheck{
@Input() hero:Hero
ngDoCheck(){
if(this.hero.name != this.oldHeroName){
//此前,被onOnChanges忽略的hero.name属性
this.oldHeroName = this.hero.name
}
}
}
AfterViewInit,AfterViewChecked
angular会在每次创建了组件的子视图后调用他们。
//子组件
@Component({
selector:"app-child-view",
template:'<input [(ngModel)]="hero">'
})
export class ChildViewComponent{
hero = "Magneta"
}
//父组件
//template
<div>
<app-child-view></app-child-view>
</div>
//Component
import {AfterViewChecked,AfterViewInit,ViewChild} from '@angular/core'
export class AfterViewComponent implements AfterViewChecked,AfterViewInit{
private prevHero = ""
ngAfterViewInit(){
console.log('afterviewinit')
this.doSomething()
}
ngAfterViewChecked(){
if(this.prevHero === this.viewChild.hero){
console.log('on change')
}else{
this.prevHero = this.viewChild.hero
console.log('afterviewchecked')
this.doSomething()
}
}
}