Angular中Google Maps组件无法接收注入服务问题

我来帮你捋捋这个问题——两个组件调用同一个Promise风格的数据服务，OnInit组件正常拿到数据，但AfterViewInit的Google Maps组件却不行，大概率是生命周期时机匹配、Promise处理逻辑，或是地图组件自身的加载顺序出了问题。

先从你的服务代码说起，首先发现一个小细节：服务里getDrinks()声明返回Promise<Drinks[]>，但then里却把响应转成Drink[]，这里的Drinks应该是笔误吧？先把这个类型错误修正，避免编译层面的隐性问题：

// 把Drinks[]改成Drink[]，和你的接口类型匹配
public getDrinks() : Promise<Drink[]>{
  const url: string = `${this.apiBaseUrl}/drinks`
  return this.http
    .get(url)
    .toPromise()
    .then(response => response as Drink[])
    .catch(this.handleError);
}

接下来针对Google Maps组件的问题，给你几个排查和解决方向：

1. 确认组件内的Promise调用逻辑是否正确 #

先检查你的Google Maps组件里调用服务的代码，是不是没正确处理Promise的结果，或者上下文this指向出了问题？比如要确保用箭头函数绑定组件上下文，同时加日志确认数据是否真的没收到：

ngAfterViewInit() {
  // 加日志确认这个钩子是否执行，以及Promise的状态
  console.log('Google Maps组件进入AfterViewInit钩子');
  
  this.drinkDataService.getDrinks()
    .then(drinks => {
      console.log('拿到饮品数据:', drinks); // 看控制台有没有这条日志
      // 这里处理数据，比如把饮品标记到地图上
      this.renderDrinksOnMap(drinks);
    })
    .catch(error => {
      console.error('请求饮品数据失败:', error); // 捕获错误，排查请求问题
    });
}

如果控制台能看到"拿到饮品数据"的日志，说明数据其实已经收到了，只是地图渲染逻辑有问题；如果看不到，那就是Promise的调用或状态有问题。

2. 匹配地图初始化与数据请求的顺序 #

AfterViewInit钩子只是表示组件视图初始化完成，但Google Maps本身可能还没加载就绪——如果你的地图是在这个钩子内初始化的，可能出现数据先返回，但地图还没准备好渲染的情况，导致你误以为没拿到数据。

可以改成等地图完全就绪后再请求数据：

@ViewChild('mapContainer') mapContainer: ElementRef;
private map: google.maps.Map;

ngAfterViewInit() {
  // 先初始化地图
  this.map = new google.maps.Map(this.mapContainer.nativeElement, {
    center: { lat: 39.9042, lng: 116.4074 },
    zoom: 12
  });

  // 监听地图的idle事件，确认地图加载完成后再请求数据
  google.maps.event.addListenerOnce(this.map, 'idle', () => {
    console.log('地图已就绪，开始请求数据');
    this.drinkDataService.getDrinks()
      .then(drinks => this.renderDrinksOnMap(drinks))
      .catch(err => console.error(err));
  });
}

3. 换成Observable（更符合Angular最佳实践） #

Angular的HttpClient本身返回的是Observable，Promise虽然能用，但Observable在异步数据流处理上更灵活，也更容易排查问题。建议把服务改成Observable风格：

// 修改服务代码
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Drink} from './drink/drink.component';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DrinkDataService {
  constructor(private http : HttpClient) { }
  private apiBaseUrl = 'http://localhost:3000/api'

  public getDrinks() : Observable<Drink[]>{
    const url: string = `${this.apiBaseUrl}/drinks`
    return this.http.get<Drink[]>(url)
      .pipe(
        catchError(this.handleError)
      );
  }

  private handleError(error: any) : Observable<never> {
    console.log('请求出错:', error);
    return throwError(() => new Error(error.message || error));
  }
}

然后在Google Maps组件里订阅：

ngAfterViewInit() {
  this.drinkDataService.getDrinks()
    .subscribe({
      next: (drinks) => {
        console.log('拿到饮品数据:', drinks);
        this.renderDrinksOnMap(drinks);
      },
      error: (err) => console.error('请求失败:', err)
    });
}

最后排查点 #

• 检查浏览器控制台有没有跨域或其他报错（不过另一个组件能拿到数据，跨域问题应该可以排除）；
• 确认Google Maps的脚本是否正确加载，有没有出现地图初始化失败的情况。

内容的提问来源于stack exchange，提问作者NonameLover