如何在angular模块中动态设置API密钥

我想动态地将GoogleMapsAPI密钥设置到模块中，以便在加载时根据每个环境（如开发、QA或生产环境）获得正确的密钥。如果有人知道这一点或遇到类似的问题，那将是一个很大的帮助

您可以在环境文件中添加密钥：

export const environment = {
  production: false,
  baseUrl: 'http://localhost:68888/api'
};

---

并将其导入到您的服务中。然后可以将生产密钥添加到.prod环境文件中。当您为production add--configuration=production构建时，这将切换出带有.prod-one的基本环境文件。可以找到更详细的信息，包括如何为QA和其他生产环境添加更多环境。

因此，您的

src/environments

文件夹中有

environment.ts

、

environment.prod.ts

等文件。因此，您的解决方案可以如下所示

在

src/environments

文件夹中创建适当的

environment..ts

文件，即

在

angular.json

文件中添加适当的配置并设置文件替换

从环境中导入api密钥

---

就这样。如果您还不清楚某些内容，或者您需要其他详细信息，请告诉我。

动态是什么意思，您希望在运行时更改它，还是将针对每个人进行修复和更改environment@Reza动态意味着：根据环境设置不同的值。设置时，您不想更改它，例如，如果在prod上您将其设置为

val1

您不想更改它（除非您构建应用程序），对吗？@Reza correct，我不会更改它。那么下面两个答案都适用于您

export const environment = {
  production: false,
  GM_API_KEY: 'YOUR API KEY HERE',
  ...
};

"configurations": {
    "prod": {...},
    "stage": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.stage.ts"
            }
        ],
        ...

import {environment} from 'path/to/environment';

// environment.GM_API_KEY <= use api key where you need it

ng build --configuration=stage