Javascript 如何在Angular 2中通过路由名称获取绝对Url？

在我的Angualar 2（最终版）应用程序中，我经常需要通过路由名称（如“/products”）创建完整（绝对）Url，例如提供特定页面的永久链接，或从另一个选项卡/窗口中的组件打开页面

是否有Angular 2 API允许通过路由名称获取绝对Url？如果否，是否存在已知的问题，例如使用javascript

---

我尝试过location或PathLocationStrategy（例如prepareExternalUrl），但该方法返回“/products”，而不是我目前找到的唯一解决方案

import { Router } from '@angular/router';
[...]

constructor(private _router: Router) { }

  redirectNewWindow() {    
  const internalUrl = '/products';

  // Resolve the base url as the full absolute url subtract the relative url.
  var currentAbsoluteUrl = window.location.href;
  var currentRelativeUrl = this._router.url;
  var index = currentAbsoluteUrl.indexOf(currentRelativeUrl);
  var baseUrl = currentAbsoluteUrl.substring(0, index);

  // Concatenate the urls to construct the desired absolute url.
  window.open(baseUrl + internalUrl, '_blank');
}

---

您可以使用

PlatformLocation

获取基本url，然后可以与

prepareExternalUrl

的返回连接：

    import { PlatformLocation } from '@angular/common';

    export class MyComponent {
        constructor(
            private platformLocation: PlatformLocation
        ){
            this.logAppStart(platformLocation);
        }

        private logAppStart(platformLocation: any){ // CHANGED THE TYPE TO ANY TO BE ABLE TO ACCESS THE LOCATION PROPERTY
            console.log(platformLocation.location); // HERE YOU FIND WHAT YOU NEED
        }
    }

---

找到

您是否尝试使用

window.location.host

与

prepareExternalUrl

的返回连接起来？你为什么需要它

routerLink

还不够？window.location.host不包含完整的基本Url，例如，因为我们希望使用“”而不是“”。我需要从组件（而不是从视图！）在新窗口中打开项目页面，例如使用window.open（绝对URL，“_blank”）。使用routerLink可以吗？我认为no.PlatformLocation.location返回错误的信息，例如for“”返回相同的字符串，而不是基本url“”。在我的回答中，我可以重新计算正确的基本url，但不能直接使用angular 2组件。似乎是

platformLocation.origin

，而不是

platformLocation.location

散列url呢？我将这个答案与@Samamahamadi的答案结合起来构建了我想要的路由，但我不需要url（并且避免需要窗口。位置）。您应该添加更多的细节，您可以考虑Window .Loo.Orthor或Window .Orth.请参阅Hash Sype（例如https//MyStut.com /ys/用户）的路由时不工作。当您从基本url（如

sharedserver.com/my app/login

）转到角度url（即

/login

）时，这不起作用，它将返回

sharedserver.com/login

@vinagreti的答案应该被接受，因为它不依赖于window.location，因此是可测试的。此答案是我们使用时唯一有效的答案#（哈希）在url的+1中

import { Router } from '@angular/router';

[...]

constructor(private router: Router) { 
  let absoluteUrl = window.location.origin + this.router.createUrlTree(['/products']);
}