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

Question

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

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

我试过位置或 PathLocationStrategy（例如 prepareExternalUrl），但该方法返回 ‘/products’ 而不是例如 http://localhost/products

原文由 Alexander Zwitbaum 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Alexander Zwitbaum 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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
        }
    }

在 这里 找到

原文由 Bruno João 发布，翻译遵循 CC BY-SA 3.0 许可协议