angular5 组件之间监听传值变化

标签：刷新   marker   baidumap   put   out   use   比例尺   传值   element   

nagular5 父子组件之间传值是实用

@Input 和@Output

当然一般传值变化是指父组件像子组件传的值变化的情况，如地图zoom变化

当筛选范围变化时地图比例尺变化地图随着缩放，这是地图控件就要监听父组件的筛选范围值变化

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  OnDestroy,
  ElementRef,
  OnChanges,
  SimpleChanges
} from ‘@angular/core‘;


/*import {loader} from ‘./loader‘;*/
/*import {BAIDU_MAP_STYLE} from ‘./map‘;*/
/*import any = jasmine.any;*/

declare const BMap: any;

@Component({
  selector: ‘app-baidu-map‘,
  templateUrl: ‘./baidu-map.component.html‘,
  styleUrls: [‘./baidu-map.component.css‘]
})
export class BaiduMapComponent implements OnInit, OnChanges {

  @Input() address: string = ‘深圳‘;
  @Input() apiKey: string = ‘sIq3pmhG5n4xVuKQ8eKr1BiV0hsLP2ek‘;
  @Input() center: any;
  @Input() zoom = 15;
  @Input() enableScrollWheelZoom = false;                                  //鼠标是否可滚动缩放 默认不可以
  @Input() zoomControl = false;                                            //是否有缩放控件   默认没有


  @Output() getLocation: EventEmitter<any> = new EventEmitter();

  geoAddress = ‘‘;

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit() {

    //不需要init because zoom一进来就变化了就触发onChange函数执行loader去initMap了所以此处不需要loader

    /*  var address = this.geoAddress ? this.geoAddress : this.address;
      loader(this.apiKey, this.initMap.bind(this,address));*/
  }

  ngOnChanges(changes: SimpleChanges) {
    //当zoomlevel改变刷新地图时marker不需要初始化位最开始定位的
    var address = this.geoAddress ? this.geoAddress : this.address;
    this.loader(this.apiKey, this.initMap.bind(this, address));
  }
}

这样就可以监听了（注意标红的代码）

angular5 组件之间监听传值变化

标签：刷新   marker   baidumap   put   out   use   比例尺   传值   element   

原文地址：http://www.cnblogs.com/mttcug/p/7995179.html