Загрузите Google Map в Angular, не загружайте с первого раза

Question

В моем приложении загружено несколько карт, моя ошибка, которая не возникает на страницах, заключается в том, что при первой загрузке страницы она не загружает карты, но когда я выполняю infinitescroll, если он загружает карты, эта страница загружается маршрутизатором Angular, который перенаправляет ее.

Сначала я загружаю информацию в ngOnInit (): void {}, и, наконец, эта функция выполняется для загрузки карт.

Я пытался передать информацию ему разными способами с navParams, и он все еще не работает, я также установил время setTimeout basatante на случай, если пришло время для загрузки, но он все еще не работает

Это мой код

 async getPublications(page, adding = false) {
    const loading = await this.loading.create();
    loading.present();
    this._publicationService.getPublicationsUser(this.token,this.id ,page).subscribe(
      response => {
        console.log(response);
        if (response.publications) {
          this.coords = [];
          this.total = response.total_items;
          this.pages = response.pages;
          this.items_per_page = response.items_per_page
          if (!adding) {
            this.publications = response.publications
            for (let i = 0; i < this.publications.length; i++) {
              let cord = this.publications[i].location.split(',');
              let object = {
                lat: cord[0], lng: cord[1], zoom: 15
              }
              this.coords.push(object);
            }
            setTimeout(() => {
              this.initialize();
              loading.dismiss();
            }, 3000);
          } else {
            var arrayA = this.publications;
            var arrayB = response.publications;
            this.publications = arrayA.concat(arrayB);
            console.log(this.publications)
            for (let i = 0; i < this.publications.length; i++) {
              let cord = this.publications[i].location.split(',');
              let object = {
                lat: cord[0], lng: cord[1], zoom: 15
              }
              this.coords.push(object);
            }
            setTimeout(() => {
              this.initialize();
              loading.dismiss();
            }, 3000);
          }
        } else {
         
          loading.dismiss();
        }
      },
      async error => {
      }
    )
  }
  
  initialize() {
    for (var i = 0, length = this.coords.length; i < length; i++) {
      var point = this.coords[i];
      var latlng = new google.maps.LatLng(point.lat, point.lng);
      this.maps[i] = new google.maps.Map(document.getElementById('map' + (i)), {
        zoom: point.zoom,
        center: latlng,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: false,
        gestureHandling: 'none',
      });
      this.markers[i] = new google.maps.Marker({
        position: latlng,
        map: this.maps[i]
      });
    }
  }
  

<div id="{{'map'+i}}" style="max-width:500px; height:300px"></div>

Answer 1

Я думаю, что проблема в том, когда вы генерируете div. Вам нужно вдохнуть Angular, чтобы создать div, а затем вызвать для инициализации. «дыхание» использует setTimeout, но вам не нужно указывать миллисекунды. Ну, общая идея в ngOnInit, подпишитесь на ActivateRoute paramMap, см. docs

ngOnInit() {
  this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>{
      this.id=+params.get('id') //I suppose you has in params id and page
      this.page=+params.get('id')
      return this._publicationService.getPublicationsUser(this.token,this.id ,this.page)
    }) //see that you, in some way, are subscribing to "this._publicationService"
  ).subscribe(res=>{
     ....
     this.items_per_page = response.items_per_page 
     this.coords=..your code.. //I suppose your *ngFor is loop over this.coords(*)
     ...
     setTimeout(()=>{ //<--this is the "breath"
         this.initialize()
     })
  })
}

(*) Я хочу сказать, что ваш l oop примерно такой:

<div *ngFor="let coord of coords;let i=index">
  <div id="{{'map'+i}}" style="max-width:500px; height:300px"></div>
</div>

Как видите, Angular сначала создайте «блоки» и «после дыхания» заполните картами. Вы можете увидеть setTimeout (), как вы говорите Angular: «Эй, парень! Сначала перекрасите приложение, а после перерисовки запомните это другое действие»