angular5 组件之间监听传值变化

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

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