angular - ngOnChanges 没有触发

Question

changeEnt()如果我运行方法，我无法弄清楚为什么 ngOnChanges 会被执行，而如果我点击 GoogleMaps 标记则不会被执行。

这是我的父组件

@Component({
  selector: 'app-wl-map',
  templateUrl: './wl-map.component.html',
  styleUrls: ['./wl-map.component.scss']
})
export class WlMapComponent extends BaseComponentComponent implements OnInit {

  @Input() entResList: Enterprise[];
  @ViewChild('gmap') gmapElement: any;

  coords: Coordinates;
  map: google.maps.Map;

  selectedEnt: Enterprise = new Enterprise();

  /**
   * 
   * @type {any[]}
   */
  conts = [];

  constructor(private router: Router) {
    super();
  }

  ngOnInit() {
    this.requestLocation();
  }


  /**
   * 
   */
  requestLocation(): void {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        // this.initMap(position.coords);
        this.coords = position.coords;
      });
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }


  /**
   * init map
   */
  initMap(): void {

    let lat = this.coords ? this.coords.latitude : DEFAULT_COORDS.latitude;
    let lng = this.coords ? this.coords.longitude : DEFAULT_COORDS.longitude;

    var mapProp = {
      center: new google.maps.LatLng(lat, lng),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

    this.placeMarers();
  }


  /**
   * position marker
   */
  placeMarers(): void {

    if (this.entResList) {

      var markers: google.maps.Marker[] = this.entResList.map(function (ent: Enterprise, i) {

        if (ent.locationList.length > 0) {

          let mark = new google.maps.Marker({
            position: new google.maps.LatLng(ent.locationList[0].latitudine, ent.locationList[0].longitudine),
            label: this.getMarkerLabel(ent)
          });

          google.maps.event.addListener(mark, 'click', this.markerClickHandler.bind(this, ent));

          return mark;
        }
      }.bind(this));


      // Add a marker clusterer to manage the markers.
      var markerCluster = new MarkerClusterer(this.map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
    }
  }


  /**
   * invoked on marker click
   * @param {Enterprise} ent
   */
  markerClickHandler(ent: Enterprise): void {
    if (ent) {
      this.selectedEnt = new Enterprise();
    }
  }

  changeEnt() {
    setTimeout(function () {
      this.selectedEnt = new Enterprise();
      console.log('this button handler', this);
    }.bind(this), 1000)
  }
}

这是我的父组件模板

<button mat-raised-button color="primary" (click)="initMap()">Init Map</button><br/><br/>

<div class="map-container">
  <app-wl-map-popup-enterprise [ent]="selectedEnt"></app-wl-map-popup-enterprise>

  <div id="google-map" #gmap style="width:100%; height:400px"></div>

  <button (click)="changeEnt()">Change ENt</button>
</div>

这是我的子组件

@Component({
  selector: 'app-wl-map-popup-enterprise',
  templateUrl: './wl-map-popup-enterprise.component.html',
  styleUrls: ['./wl-map-popup-enterprise.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class WlMapPopupEnterpriseComponent extends BaseComponentComponent implements OnInit, OnChanges {

  @Input() ent: Enterprise;

  constructor() {
    super();
  }

  ngOnInit() {
    console.log('init', this.ent);
    console.log('globals', this.globals);
  }

  ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
    console.log('**************************** changes', changes)
  }

}

如果我加载地图并单击标记markerClickHandler()，则会执行，但不会拦截更改。

否则，如果我单击 html 按钮Change ENt并changeEnt()执行更改，则会被拦截。

我引入了一个超时来检查问题是否是由于上下文的变化，但似乎不是

标签： angularangular6ngonchanges