Angular 获取路线的完整网址

Question

想知道是否有办法检索给定路线的完整网址？

在 Angular 应用程序中，您可能会使用 router.navigate('...') ，它会立即将您的浏览器导航到给定的路由，但是有没有一种方法可以只构建 URL 字符串？

用例是与 OAuth2 等第三方服务通信，我需要在其中提供回调 url，我不希望手动构建它，而是调用类似 router.urlFor('callback')这将产生类似 "http://localhost:4200/callback"

的内容

有Location具有 prepareExternalUrl 的服务，但不幸的是它不是所需要的

编辑:

目前看来这是不可能的，也没有简单的开箱即用解决方案，但在查看资源后找到以下解决方案:

const urlTree = router.createUrlTree(['callback'], {
    queryParams: { foo: 'bar' },
    fragment: 'acme'
});
const path = location.prepareExternalUrl(urlTree.toString());
const url = window.location.origin + path;
console.log(url); // http://localhost:4200/callback?foo=bar#acme

createrUrlTree 在 routerLink 指令下被调用

Answer 1

你可以试试这个:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'stackoverflow';
  constructor(private router: Router) {
    console.log(this.router['location']._platformLocation.location.origin);
    // result: http://localhost:4200
  }
}