在 ngAfterViewInit 中等待 NgOnInit 完成

Question

我正在 ngOnInit 中加载一些数据，我需要在 ngAfterViewInit 中访问这些数据。具体来说，Google 地图 API，我从数据库中加载 GPS 坐标，然后我需要在创建地图时将它们添加到地图中。我正在 ngAfterViewInit 中创建地图本身。

我想我可以把整个事情都移到 AfterViewInit，但我想我会问是否有一个好的方法来等待 ngOnInit 完成，然后再使用 AfterViewInit 中的数据，以防我将来需要它其他项目。

ngOnInit() {
  this.loadGpsCoordinates();
}

ngAfterViewInit() {
    var elem = document.getElementById('map');
    if (elem != null) {
    this.map = new google.maps.Map(elem, {
      center: { lat: -32.3881373, lng: 55.4343223 },
      zoom: 17,
      disableDefaultUI: true
    });

    // Now loop through GPSCoordinates to add Markers
    // But wait! What if the coords aren't loaded yet?!
    ...
}

Answer 1

我假设 this.loadGpsCoordinates(); returns 是一个 Observable（如果不是，也可以这样做）

private coordinatesSubject = new ReplaySubject<any>(1)

ngOnInit() {
  this.loadGpsCoordinates().pipe(
    tap( data => this.coordinatesSubject.next(data))
  ).subscribe()
}

private ngAfterViewInit(data) { 
 
 this.coordinatesSubject().subscribe( data => {
    // data would be use below
    var elem = document.getElementById('map');
    if (elem != null) {
      this.map = new google.maps.Map(elem, {
        center: { lat: -32.3881373, lng: 55.4343223 },
        zoom: 17,
        disableDefaultUI: true
      });
     }
  })
}

注意：我没有添加 takeUntil(destroyed$) 但您可以单独查找 - 它用于在删除组件时退订服务

在 ngAfterViewInit 中等待 NgOnInit 完成

Wait for NgOnInit to complete inside ngAfterViewInit

angular