动态更改 angular-google-maps 语言答案

【问题标题】：Change angular-google-maps language dynamically动态更改 angular-google-maps 语言
【发布时间】：2021-04-24 03:10:06
【问题描述】：

语言改变时是否可以动态改变地图语言？或者至少在我下次访问时更改了语言映射（更改语言后）。

我可以使用此代码（在 mymap.module.ts 中）在地图加载时设置默认语言：

@NgModule({ imports: [ 
  AgmCoreModule.forRoot({ apiKey: 'MY_KEY',
  language: 'es', }),
  ]
})

我可以使用 this.translate.currentLang（在 mymap.component.ts 中）获取当前语言。

但我不知道如何将两者结合起来。

【问题讨论】：

您是否尝试过重新初始化整个地图？

标签： angular angular-google-maps

【解决方案1】：

为了改变地图的语言，需要重新获取一堆本地化的JS脚本。因此，您可以尝试通过本地存储来刷新整个页面（JS 而不是 Angular），例如：

@NgModule({ 
  imports: [ 
    AgmCoreModule.forRoot({ 
      apiKey: 'MY_KEY',
      language: localStorage && localStorage.gml || 'en'
    }),
  ]
})

要重新加载您的页面，请使用window.location.reload() 方法

StackBLITZ：https://stackblitz.com/edit/angular-google-maps-demo-f3xzhn?file=app%2Fapp.module.ts

【讨论】：

如果我为生产而构建，即“ng build --prod”并将 dist 部署到任何 http 服务器，则此解决方案不起作用。生成的生产版本正在删除条件“localStorage && localStorage.gml ||”。
构建生产时不工作：ng build --prod --build-optimizer

【解决方案2】：

在 app.component 添加以下内容，确保在语言更改时更新本地存储中的“lang”并使用 window.location.reload() 重新加载页面

export class AppComponent implements OnInit {
  constructor() { }

  ngOnInit() {

    var script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?v=quarterly&key=${KEY}&libraries=places&language=${localStorage && localStorage.lang || 'en'}`;
    document.head.appendChild(script);
  }
}

在你的相关模块中添加：

@NgModule({ 
  imports: [ 
    AgmCoreModule.forRoot(),
  ]
})

【讨论】：

【解决方案3】：

我知道这个问题很久以前就提出了，但我会将链接发送给任何对此解决方案感兴趣的人。它有点复杂，但它适用于 AOT AgmCoreModule - Load Google API KEY Dynamically from Angular service

【讨论】：

【解决方案4】：

我需要做一些类似的事情，其中语言和 API 密钥是动态加载的。

为此，我创建了一个名为 AppInitService 的类。在这里，我将在我的应用程序中即时初始化各种属性，例如翻译语言/货币，或者在 AGM 的情况下，API 密钥和语言。

在您的app.module.ts 或您使用的任何内容中添加以下提供程序：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AgmCoreModule, LazyMapsAPILoaderConfigLiteral, LAZY_MAPS_API_CONFIG } from '@agm/core';

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      // The apiKey must always be set, even if empty.
      apiKey: 'MyApiKey'
    })
  ],
  providers: [
    {
      // APP_INITIALIZER is the Angular dependency injection token.
      provide: APP_INITIALIZER,
      // Pass in the AGM dependency injection token.
      deps: [LAZY_MAPS_API_CONFIG],
      // Allow for multiple startup injectors if needed.
      multi: true,
      // UseFactory provides Angular with the function to invoke.
      useFactory: (googleMapsConfig: LazyMapsAPILoaderConfigLiteral) => () => AppInitService.Init(googleMapsConfig)
    }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

然后在AppInitService.ts:

import { Injectable } from '@angular/core';
import { LazyMapsAPILoaderConfigLiteral } from '@agm/core';

@Injectable()
export class AppInitService {
  public static Init(googleMapsConfig: LazyMapsAPILoaderConfigLiteral) : Promise<void> {
    return new Promise<void>((resolve, reject) => {

      // Here you'll put in your call to retrieve your language code.
      const languageCode = GetMyLanguageCode();

      // And now we set it.
      googleMapsConfig.language = languageCode;

      // Resolve the promise as we're done.
      resolve();
    });
  }
}

有一个如何使用 Angular 应用初始化here 的示例。我更喜欢静态函数，因为您不必为了使用它们而实例化类。

【讨论】：