代码之家  ›  专栏  ›  技术社区  ›  firegloves

ngongchanges没有开火

  •  1
  • firegloves  · 技术社区  · 7 年前

    我不明白如果我运行,为什么要执行ngOnChanges changeEnt() 方法,如果我单击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 变更() 正在执行的更改被截获。

    我引入了一个超时来检查问题是否是由上下文更改引起的,但似乎不是

    0 回复  |  直到 7 年前
    推荐文章