Angular 守卫不返回数据

Question

我正在使用 google 地图 API 获取 maxLat、maxLng、minLat、minLng 然后我想在创建组件之前解析数据库中的数据，这是用于 SEO 元和描述

问题是，守卫正在解析数据，而不是解析组件

我的GuardService.ts

@Injectable({
  providedIn: 'root'
})
export class BusquedaGuardService implements CanActivate {
  componentForm = {
    locality: 'long_name',
    administrative_area_level_2: 'short_name',
    administrative_area_level_1: 'short_name'
  };
  ubicacion: string
  maxLng
  minLng
  maxLat
  minLat
  constructor(private http: HttpClient,
    private router: Router,
    @Inject(PLATFORM_ID) private platformId: Object,
    private ngZone: NgZone,
    private mapaService: MapaService,
    private mapsAPILoader: MapsAPILoader) { }
  async getBounds() {
    let promise = new Promise((res, rej) => {
      this.mapsAPILoader.load().then(() => {
        this.ngZone.run(() => {
          let autocompleteService = new google.maps.places.AutocompleteService();
          autocompleteService.getPlacePredictions(
            {
              'input': this.ubicacion,
              'componentRestrictions': { 'country': 'cl' },
            },
            (list, status) => {
              if (list == null || list.length == 0) {
                // console.log("No results");
              } else {
                let placesService = new google.maps.places.PlacesService(document.createElement('div'));
                placesService.getDetails(
                  { placeId: list[0].reference },
                  (detailsResult: google.maps.places.PlaceResult, placesServiceStatus) => {
                    let direccion = ''
                    let contador = 0
                    for (var i = 0; i < detailsResult.address_components.length; i++) {
                      var addressType = detailsResult.address_components[i].types[0];
                      if (this.componentForm[addressType]) {
                        var val = detailsResult.address_components[i][this.componentForm[addressType]];
                        // $(`#${addressType}`).value = val;
                        if (addressType == 'locality') {
                          direccion = direccion + val
                          contador++
                        } else {
                          if (contador == 0 && addressType == "administrative_area_level_2") {
                            direccion = direccion + val
                            contador++
                          } else {
                            if (contador == 0 && addressType == "administrative_area_level_1") {
                              direccion = direccion + val
                            } else {
                              direccion = direccion + ", " + val
                            }
                          }
                        }
                      }
                    }
                    this.mapaService.setDireccion(direccion)
                    let e = detailsResult.geometry.viewport
                    let lat = e[Object.keys(e)[0]]
                    let lng = e[Object.keys(e)[1]]
                    // console.log(lat, lng)
                    this.maxLng = lng[Object.keys(lng)[1]]
                    this.minLng = lng[Object.keys(lng)[0]]
                    this.maxLat = lat[Object.keys(lng)[1]]
                    this.minLat = lat[Object.keys(lng)[0]]
                    let bounds = {
                      maxLat: this.maxLat,
                      maxLng: this.maxLng,
                      minLat: this.minLat,
                      minLng: this.minLng
                    }
                    this.mapaService.setBounds(this.maxLng, this.minLng, this.maxLat, this.minLat)
                    this.mapaService.setLatLng(detailsResult.geometry.location.lat(), detailsResult.geometry.location.lng())
                    console.log('aqui')
                    console.log(`${ipMarco}Instalaciones/Bounds/${this.maxLng}/${this.minLng}/${this.maxLat}/${this.minLat}`)
                    res(bounds)
                    // return this.http.get(`${ipMarco}Instalaciones/Bounds/${this.maxLng}/${this.minLng}/${this.maxLat}/${this.minLat}`).pipe(
                    //   map((res: any) => {
                    //     console.log(res)
                    //     return of(true)
                    //   }),
                    //   catchError(error => {
                    //     console.log('aqui')
                    //     console.log(error)
                    //     this.router.navigateByUrl('')
                    //     return of(false)
                    //   })
                    // )
                  }
                )
              }
            }
          );
        })
      })
    })
    let bounds = await promise
    console.log(bounds)
    return bounds
  }
  canActivate(route: ActivatedRouteSnapshot): Observable<any> {
    // return of(true)
    // console.log('aqui')
    if (route.queryParams['ubicacion']) {
      this.ubicacion = route.queryParams['ubicacion']
      if (this.ubicacion != undefined) {
        if (this.ubicacion != "") {
          return from(this.getBounds()).pipe(
            switchMap((bounds: any) => {
              return this.http.get(`${ipMarco}Instalaciones/Bounds/${bounds.maxLng}/${bounds.minLng}/${bounds.maxLat}/${bounds.minLat}`).pipe(
                map((res: any) => {
                  console.log(res)
                  return of(true)
                }),
                catchError(error => {
                  console.log('aqui')
                  console.log(error)
                  this.router.navigateByUrl('')
                  return of(false)
                })
              )
            })
          )
        }
      }
    }
  }
}

我的应用-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: InicioComponent
  },
  {
    path: 'busqueda',
    component: BusquedaComponent,
    canActivate: [BusquedaGuardService],
    resolve: { data: BusquedaResolveService }
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的resolve.service.ts

@Injectable({
  providedIn: 'root'
})
export class BusquedaResolveService {

  constructor(private mapaService:MapaService,
    private http:HttpClient) {
      console.log('nose')
    }
  resolve(route: ActivatedRouteSnapshot) {
    let maxLng = this.mapaService.getBoundsUnaVez().maxLng
    let minLng = this.mapaService.getBoundsUnaVez().minLng
    let maxLat = this.mapaService.getBoundsUnaVez().maxLat
    let minLat = this.mapaService.getBoundsUnaVez().minLat
    console.log(maxLng,minLng,maxLat,minLat)
    return this.http.get(`${ipMarco}Instalaciones/Bounds/${maxLng}/${minLng}/${maxLat}/${minLat}`);
  }
}

编辑

我意识到我的错误，而不是使用守卫来获取我需要使用 resolve 的数据这是我的新 resolve.service.ts:

import { Injectable, NgZone, PLATFORM_ID, Inject } from '@angular/core';
import { ActivatedRouteSnapshot, Router } from '@angular/router';
import { MapaService } from './mapa.service';
import { ipMarco } from 'src/global';
import { HttpClient } from '@angular/common/http';
import { MapsAPILoader } from '@agm/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class BusquedaResolveService {
  componentForm = {
    locality: 'long_name',
    administrative_area_level_2: 'short_name',
    administrative_area_level_1: 'short_name'
  };
  ubicacion: string
  maxLng
  minLng
  maxLat
  minLat
  constructor(private mapaService: MapaService,
    private http: HttpClient,
    private ngZone: NgZone,
    private router: Router,
    private mapsAPILoader: MapsAPILoader,
    @Inject(PLATFORM_ID) private platformId: Object,) {
  }
  async getBounds() {
    if (isPlatformBrowser(this.platformId)) {
      let promise = new Promise((res, rej) => {
        this.mapsAPILoader.load().then(() => {
          this.ngZone.run(() => {
            let autocompleteService = new google.maps.places.AutocompleteService();
            autocompleteService.getPlacePredictions(
              {
                'input': this.ubicacion,
                'componentRestrictions': { 'country': 'cl' },
              },
              (list, status) => {
                if (list == null || list.length == 0) {
                  // console.log("No results");
                } else {
                  let placesService = new google.maps.places.PlacesService(document.createElement('div'));
                  placesService.getDetails(
                    { placeId: list[0].reference },
                    (detailsResult: google.maps.places.PlaceResult, placesServiceStatus) => {
                      let direccion = ''
                      let contador = 0
                      for (var i = 0; i < detailsResult.address_components.length; i++) {
                        var addressType = detailsResult.address_components[i].types[0];
                        if (this.componentForm[addressType]) {
                          var val = detailsResult.address_components[i][this.componentForm[addressType]];
                          // $(`#${addressType}`).value = val;
                          if (addressType == 'locality') {
                            direccion = direccion + val
                            contador++
                          } else {
                            if (contador == 0 && addressType == "administrative_area_level_2") {
                              direccion = direccion + val
                              contador++
                            } else {
                              if (contador == 0 && addressType == "administrative_area_level_1") {
                                direccion = direccion + val
                              } else {
                                direccion = direccion + ", " + val
                              }
                            }
                          }
                        }
                      }
                      this.mapaService.setDireccion(direccion)
                      let e = detailsResult.geometry.viewport
                      let lat = e[Object.keys(e)[0]]
                      let lng = e[Object.keys(e)[1]]
                      // console.log(lat, lng)
                      this.maxLng = lng[Object.keys(lng)[1]]
                      this.minLng = lng[Object.keys(lng)[0]]
                      this.maxLat = lat[Object.keys(lng)[1]]
                      this.minLat = lat[Object.keys(lng)[0]]
                      let bounds = {
                        maxLat: this.maxLat,
                        maxLng: this.maxLng,
                        minLat: this.minLat,
                        minLng: this.minLng
                      }
                      this.mapaService.setBounds(this.maxLng, this.minLng, this.maxLat, this.minLat)
                      this.mapaService.setLatLng(detailsResult.geometry.location.lat(), detailsResult.geometry.location.lng())
                      console.log('aqui')
                      console.log(`${ipMarco}Instalaciones/Bounds/${this.maxLng}/${this.minLng}/${this.maxLat}/${this.minLat}`)
                      res(bounds)
                    }
                  )
                }
              }
            );
          })
        })
      })
      let bounds = await promise
      console.log(bounds)
      return bounds
    }
  }
  resolve(route: ActivatedRouteSnapshot): Promise<any> | boolean {
    if (route.queryParams['ubicacion']) {
      this.ubicacion = route.queryParams['ubicacion']
      if (this.ubicacion != undefined) {
        if (this.ubicacion != "") {
          return this.getBounds().then((bounds: any) => {
            return this.http.get(`${ipMarco}Instalaciones/Bounds/${bounds.maxLng}/${bounds.minLng}/${bounds.maxLat}/${bounds.minLat}`).toPromise()
              .then(respuesta => respuesta).catch(error => {
                console.log(error)
                this.router.navigateByUrl('')
                return false
              })
          })
        }
      }
    }
  }
}

然后我删除了我的守卫，因为我在这个组件中不需要它

Answer 1

我通过在 resolve.service 而不是 guard

中进行操作解决了

这对我有用

我的resolve.service.ts

import { Injectable, NgZone, PLATFORM_ID, Inject } from '@angular/core';
import { ActivatedRouteSnapshot, Router } from '@angular/router';
import { MapaService } from './mapa.service';
import { ipMarco } from 'src/global';
import { HttpClient } from '@angular/common/http';
import { MapsAPILoader } from '@agm/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class BusquedaResolveService {
  componentForm = {
    locality: 'long_name',
    administrative_area_level_2: 'short_name',
    administrative_area_level_1: 'short_name'
  };
  ubicacion: string
  maxLng
  minLng
  maxLat
  minLat
  constructor(private mapaService: MapaService,
    private http: HttpClient,
    private ngZone: NgZone,
    private router: Router,
    private mapsAPILoader: MapsAPILoader,
    @Inject(PLATFORM_ID) private platformId: Object,) {
  }
  async getBounds() {
    if (isPlatformBrowser(this.platformId)) {
      let promise = new Promise((res, rej) => {
        this.mapsAPILoader.load().then(() => {
          this.ngZone.run(() => {
            let autocompleteService = new google.maps.places.AutocompleteService();
            autocompleteService.getPlacePredictions(
              {
                'input': this.ubicacion,
                'componentRestrictions': { 'country': 'cl' },
              },
              (list, status) => {
                if (list == null || list.length == 0) {
                  // console.log("No results");
                } else {
                  let placesService = new google.maps.places.PlacesService(document.createElement('div'));
                  placesService.getDetails(
                    { placeId: list[0].reference },
                    (detailsResult: google.maps.places.PlaceResult, placesServiceStatus) => {
                      let direccion = ''
                      let contador = 0
                      for (var i = 0; i < detailsResult.address_components.length; i++) {
                        var addressType = detailsResult.address_components[i].types[0];
                        if (this.componentForm[addressType]) {
                          var val = detailsResult.address_components[i][this.componentForm[addressType]];
                          // $(`#${addressType}`).value = val;
                          if (addressType == 'locality') {
                            direccion = direccion + val
                            contador++
                          } else {
                            if (contador == 0 && addressType == "administrative_area_level_2") {
                              direccion = direccion + val
                              contador++
                            } else {
                              if (contador == 0 && addressType == "administrative_area_level_1") {
                                direccion = direccion + val
                              } else {
                                direccion = direccion + ", " + val
                              }
                            }
                          }
                        }
                      }
                      this.mapaService.setDireccion(direccion)
                      let e = detailsResult.geometry.viewport
                      let lat = e[Object.keys(e)[0]]
                      let lng = e[Object.keys(e)[1]]
                      // console.log(lat, lng)
                      this.maxLng = lng[Object.keys(lng)[1]]
                      this.minLng = lng[Object.keys(lng)[0]]
                      this.maxLat = lat[Object.keys(lng)[1]]
                      this.minLat = lat[Object.keys(lng)[0]]
                      let bounds = {
                        maxLat: this.maxLat,
                        maxLng: this.maxLng,
                        minLat: this.minLat,
                        minLng: this.minLng
                      }
                      this.mapaService.setBounds(this.maxLng, this.minLng, this.maxLat, this.minLat)
                      this.mapaService.setLatLng(detailsResult.geometry.location.lat(), detailsResult.geometry.location.lng())
                      console.log('aqui')
                      console.log(`${ipMarco}Instalaciones/Bounds/${this.maxLng}/${this.minLng}/${this.maxLat}/${this.minLat}`)
                      res(bounds)
                    }
                  )
                }
              }
            );
          })
        })
      })
      let bounds = await promise
      console.log(bounds)
      return bounds
    }
  }
  resolve(route: ActivatedRouteSnapshot): Promise<any> | boolean {
    if (route.queryParams['ubicacion']) {
      this.ubicacion = route.queryParams['ubicacion']
      if (this.ubicacion != undefined) {
        if (this.ubicacion != "") {
          return this.getBounds().then((bounds: any) => {
            return this.http.get(`${ipMarco}Instalaciones/Bounds/${bounds.maxLng}/${bounds.minLng}/${bounds.maxLat}/${bounds.minLat}`).toPromise()
              .then(respuesta => respuesta).catch(error => {
                console.log(error)
                this.router.navigateByUrl('')
                return false
              })
          })
        }
      }
    }
  }
}

Angular 守卫不返回数据

Angular guard not returning data

angular

google-maps-api-3

rxjs

angular-router-guards