Angular沙箱应用程序读取浏览器URL

Question

目前，我正在努力从浏览器读取URL并将其分配为全局URL，而不是对base_url进行硬编码，我需要从浏览器中读取它，并将其修补为带有URL的所有服务。 我已经尝试过执行此操作，但此代码有效，但是问题是，一旦重新加载屏幕，所有API都会失败。

码

 setTimeout(() => {
     if (environment.production) {
         base_url = window.location.origin + '/APPLICATION/resources/';
     }else {
        base_url = 'http://106.51.66.219:1234/APPLICATION/resources/' ;
     }
 }, 1000);

有没有更好的方法来设置base_url ，即使单击刷新后它也可以正常工作。

Answer 1

在使用angularjs时，您可以尝试使用$ location服务从浏览器获取URL，如下所示，当重新加载页面时，此方法也将正常运行

setTimeout(() => {
 if (environment.production) {
     base_url = $location.protocol()+'//'+$location.host() + '/APPLICATION/resources/';
 }else {
    base_url = 'http://106.51.66.219:1234/APPLICATION/resources/' ;
 }
}, 1000);

并且如果在生产中在URL中有端口，则必须写一些条件以在URL中加入端口（$ location.port（））

Answer 2

两件事情：

1. 切勿向客户端公开此类配置。 在生产版本中，人们可以看到您的dev endpoint 。 尝试将此类配置尽可能地移至构建/捆绑系统。

2. 在service或constants.ts文件中定义所有此类常量是一个好主意。 正如@plalx所指出的

Answer 3

您可以在此处使用标准JS：

window.location.href

但您宁愿为此使用Angular路线：

constructor(route: ActivatedRoute) {
    const url: Observable<string> = route.url.map(segments => segments.join(''));
    url.subscribe((url) => console.log(url));
}

请参阅： https ： //angular.io/api/router/ActivatedRoute