如何通过 Angular 2 中的路由名称获取绝对 URL？答案

【问题标题】：How to get an absolute Url by a route name in Angular 2?如何通过 Angular 2 中的路由名称获取绝对 URL？
【发布时间】：2017-05-17 18:27:43
【问题描述】：

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

是否有任何允许通过路由名称获取绝对 URL 的 Angular 2 API？如果不是，是一些已知的解决方法，例如使用javascript？

我尝试过 location 或 PathLocationStrategy（例如 prepareExternalUrl），但该方法返回 '/products' 而不是例如http://localhost/products

【问题讨论】：

您是否尝试使用window.location.host 与prepareExternalUrl 的返回连接？你为什么需要它？ routerLink 还不够吗？
window.location.host 不包含完整的基本 URL，例如对于localhost.8000/virt_sites/virt_dir/test.html，我们期望“localhost.8000/virt_sites/virt_dir”而不是“localhost.8000”。我需要使用例如从组件（而不是视图！）在新窗口中打开一个项目页面window.open(absoluteUrl, '_blank')。 routerLink可以吗？我认为没有。

标签： javascript angular angular2-routing

【解决方案1】：

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

[...]

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

【讨论】：

你应该添加更多细节
您可以考虑 window.location.origin 或 window.origin。请看stackoverflow.com/questions/55451493/what-is-window-origin
当您有带有哈希 # 的路由时不起作用（例如 https//mysite.com/#/users）
当您从sharedserver.com/my-app/login 之类的基本网址开始并且角度网址只是/login 时，这不起作用，它将返回sharedserver.com/login

【解决方案2】：

你可以使用PlatformLocation获取base_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
        }
    }

找到here

【讨论】：

PlatformLocation.location 返回错误信息，例如for "localhost:20623/welcome" 返回相同的字符串，而不是基本 url "localhost:20623"。在我的回答中，我可以解决正确的基本 url，但不能直接使用 angular 2 组件。
好像是platformLocation.origin，而不是platformLocation.location
hash # urls 怎么样？
我将此答案与@SamanMahamadi 的答案结合起来构建了我想要的路线，但我不需要# url（并且避免了对window.location 的需要）。
对此表示反对。因为，来自PlatformLocation 的 Angular 文档： > 应用程序开发人员不应直接使用此类。而是使用位置。

【解决方案3】：

我目前找到的唯一解决方案

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');
}

【讨论】：

@vinagreti 的回答应该被接受，因为它不依赖于 window.location，因此是可测试的
只有当我们在 Angular url 的 +1 中使用 # (hash) 时，这个答案才有效