angular学习3-生命周期

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()	
		}
	}
}

AfterContent