课程疑问,ngOnChanges,6-5组件生命周期钩子概述

来源:6-5 组件生命周期钩子概述

Meepo校园联盟

2017-04-02

如果有很多变量就要写很多检测

checkZoom(changes: SimpleChanges){
  let change = changes['zoom'];
  //如果存在change
  if(change){
    // 如果不是第一次
    if(!change.firstChange){
      this.map.zoomTo(change.currentValue)
    }
  }
}

@ViewChild('map') mapElement: ElementRef

constructor() {
    //console.log('on init');
    //let option = {
    //  zoom: this._zoom
    //}
    
    //console.log(option);
    //这里更坑爹,这里的this.mapElement实在 constructor 后才获取到的
    //this.map = new qq.maps.Map(this.mapElement.nativeElement,option);
    //this.mapSuccess.emit(this.map)
}

_zoom: number;
@Input()
get zoom(){
  return this._zoom;
}
set zoom(num: number){
  this._zoom = num;
  //this.map.zoomTo(this._zoom) 这地方报错,好坑爹,这个实在ngOninit()之前执行的
}

ngOnInit() {
  console.log('on init');
  let option = {
    zoom: this._zoom
  }

  console.log(option);
  this.map = new qq.maps.Map(this.mapElement.nativeElement,option);
  this.mapSuccess.emit(this.map)
}

ngOnChanges(changes){
  this.checkZoom(changes)
}

我在封装地图组件,有没有好的解决方案,求教

写回答

1回答

Meepo校园联盟

提问者

2017-04-02

额 二逼了.. 已解决

constructor(
  public ele: ElementRef
) {
  this.map = new qq.maps.Map(this.ele.nativeElement);
}


0
0

Angular4.0从入门到实战 打造股票管理网站

Angular新特性,教你熟练使用 Angular 和 Typescript 开发组件式单页应用

2683 学习 · 1361 问题

查看课程