Question

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

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

用例就是与第三方服务（如OAuth2）进行通信，我需要提供回调网址，我希望不要手工构建它，而是调用类似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

您能做一些列出此事的方法以获得URL列表并发送您想要的URL吗？ ```

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';


@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {

  constructor(private router: Router) { }
  urls: string[] = [];

  ngOnInit() {

    this.router.config.forEach(r => {
      console.log(r)
      this.urls.push(this.buildUrl(r.path));
    })
  }

  buildUrl(path: string) {
    return `${environment.basePath}/${path}`
  }

}

```

Answer 2

您可以在javascript上使用以下代码获取baseurl

const parsedUrl = new URL(window.location.href);
const baseUrl = parsedUrl.origin;
console.log(baseUrl);

，然后将其与例如/callback连接起来

http://localhost:4200/callback

Answer 3

您通常是在某个位置（例如，在yaml文件中。这样，您可以配置所有不同的阶段（组件测试，集成测试，附加测试，生产）。在运行时，您将阅读配置并使用某种实用程序方法或仅使用字符串连接来生成标记URL。

我不会解析location.href属性，因为您通常位于负载均衡器（反向代理）的后面，因此您不知道要在基本URL中确切添加什么内容。对于简单的应用程序来说可能就足够了。

这里有个例子：

您的本地URL：http：// localhost：8080 / myapp / somefunction 您的生产网址：https://www.somecompany.com/itdepartment/myapp/somefunction

Answer 4

你可以试试这个：

从'@angular/core'导入{组件}；从'@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
  }
}

Answer 5

我认为您在处理 oauth2 时犯了错误。对于 oauth2 1-前端请求api登录，然后api将其重定向到外部oauth2服务器。 2-然后在登录 oauth2 服务器后将您重定向到 api 回调（它在 oauth2 服务器中指定为 returnUrl）。 3- api 服务器将浏览器重定向到前端应用程序。因此，当前端调用 api 服务器登录时，只需设置查询字符串 returnUrl( 那个值是当前页面路由所以它是location.href）在 url 并将其发送到 api，然后 api 将保存它，在 api 回调中，api 会将客户端重定向到以前保存的 Url。

Answer 6

您也可以获取完整的路由 URL 和分段。使用以下代码：

    import { Component, OnInit } from '@angular/core';
    import { Router, ActivatedRoute } from '@angular/router';
    
    @Component({
      selector: 'app-hero',
      templateUrl: './hero.component.html',
      styleUrls: ['./hero.component.css']
    })
    export class HeroComponent implements OnInit {
    
      constructor(private router: Router,  private activeRoute: ActivatedRoute) { 
        this.activeRoute.queryParams.subscribe((qp) => {
          console.log('Get Router URL in segment:', this.activeRoute.snapshot);
          console.log('Get Full Router URL:', this.router.url);
        });
      }
    
      ngOnInit(): void {
      }    
    }

更多信息check out this link

Answer 7

您可以使用 Activated Route。有关详细信息，请参阅此 link。

Angular获取路线的完整URL

7 个答案: