Javascript 如何在服务中自动更改URL，更改URL后应影响所有组件，而无需在angular6中保存/构建/运行

我们正在用angular 6托管一个新的应用程序，我们有许多带有不同URL的服务器，我想自动更改它们（如java中的.property文件）。在谷歌搜索之后，我得到了一些答案，比如在environment.ts文件中更改路径，所以它会影响所有组件。但这并不完全是我的要求，这意味着如果我在environment.ts文件中更改URL，我们应该保存该文件，并且需要再次编译它。这正是我面临的问题，我不想保存/编译文件

在这种情况下请帮助我

service.ts文件

emplLoginCheckUrl = this.baseUrl+"/checkValidUser";

 emplLoginCheckUrl = this.baseUrl+"/checkValidUser";

       validateUserDetails(employeeDetails): Observable<any> {
            console.log(this.baseUrl);
            return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
        }

我试图从environment.ts文件中更改基本url，它工作正常，但在保存文件后，我不希望保存文件，因为它应该自动更改

.service.ts文件

emplLoginCheckUrl = this.baseUrl+"/checkValidUser";

 emplLoginCheckUrl = this.baseUrl+"/checkValidUser";

       validateUserDetails(employeeDetails): Observable<any> {
            console.log(this.baseUrl);
            return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
        }

预期：

---

URL应该会自动更改，而无需一次又一次地保存/运行/编译/构建，因为在托管时我只能保存/运行/编译/构建一次。托管后，如果我想更改URL，则无法转到那里，请更改路径并不能再次编译它。

您可以在第一次访问应用程序时将端点作为查询参数传入，如下所示：

http://localhost/yourapplication?baseUrl=http://rest/somerestservice

然后在app.component.ts中读取此查询参数值，并将其设置为

baseUrl

环境变量

小心，即使这会起作用，我不知道这是否是实现这一目标的最优雅的方式

更新：按OP要求的代码

演示：

---

演示代码：

这是角度应用程序的常见场景
也就是说，如果要更改后端api url，则不希望在服务器上再次构建和编译代码。下面是我在角度项目中使用的方法

方法：

一,。在

assets

文件夹中创建一个

config.json

文件，因为服务器上存在assets文件夹

{  // ---------- config.json---------
  "serviceUrl": "http://172.168.1.190:1393/"
}

2。在

constants

文件中创建变量

serviceUrl

，因为您的角度应用程序将有一个常量文件。分配此变量

empty

值，因为此变量稍后将保留更新的服务url

export class AppConstants { 

  public static xhr = {
        url: {
                serviceUrl: ''  // <===== empty value
             }
       }
}

对于每个

HTTP

调用，使用

constants

文件的

serviceUrl

作为基本url

this.http.get（'${AppConstants.xhr.url.serviceUrl}api/roles/list'）

由于在

assets

文件夹

config.json

中更改变量值，将在启动时获取该变量，并替换常量文件变量，我们将使用该变量调用

api

这基本上就是“众所周知的文件”模式。它是web服务器上公开配置信息的路径。应用程序在引导时必须通过HTTP请求获取实时配置，并且可以通过重新获取数据来刷新配置

它基于IETF RFC：

---

你能分享一下代码吗，我有点困惑，没有正确地理解。更新了答案并提供了演示。Thx@Awad Maharoof你的解决方案在这里不起作用，同样的代码在你的案例中起作用。我不知道我在哪里落后。@Awad Maharoof它会自动检测到您案例中的更改，但在我的案例中，它不会，您能帮助我我在哪里落后吗，我尝试了与您使用的相同的代码。您能将您的资产文件夹与config.json文件共享吗，请发布一个演示。我认为这对我很有帮助，thx@Abhishek Kumar@pktechie我无法从stackblitz中的assets文件夹中读取config.json文件，但我已经在我的项目中实现了这种方法，所以在一个虚拟的angular项目上本地尝试这种解决方案，以了解这种方法<答案中显示的code>config.json是保存在

assets

文件夹中的唯一内容。当前您正在更改变量值的位置，我的意思是在哪个文件夹的后端或前端？如果我更改后端的值，它会自动生效，请告诉我。@pktechie我在前端文件中取了一个空变量，在angular app初始化时，我从angular app上的assest文件夹中读取了一个文件，并用我读取的文件中的值替换该空变量。在每个服务中，都使用这个变量作为http请求的基本url。所以，一切都发生在前端@Abhishek Kumar是的，我同意你，我得到了你，你在解释什么。我问上述问题的原因是，我所做的一切都与您解释我的方式相同，但如果我将url从资产文件夹更改，它将自动影响整个应用程序，但在这里不是，并且在更改url后，它将影响我保存config.json文件的时间。请帮助我在这种情况下，我不想保存更改变量值后，它应该自动工作和thx的帮助文件。请检查我的答案。