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