如何从完整的url字符串中获取唯一的路径

Question

使用路由器（this.router.url）时，如果没有参数

，我会收到字符串/MyRouterName?type=abc，有时/MyRouterName

我是否只能从完整网址获取路径/MyRouterName（对于所有情况）？

Answer 1

您可以使用激活的路径组件的快照来获取此URL。

import { Router, ActivatedRoute } from '@angular/router';
 constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute) {

    console.log("routes");
    console.log(activatedRoute.snapshot.url); // array of states
    console.log(activatedRoute.snapshot.url[0].path); 
}

链接到Jose G Varanam How to get current route

的原始答案

Answer 2

如果您重新加载页面，则无法通过Router或ActivatedRoute获取路径路径。 您可以使用window.location.pathname代替。{/ p>

Answer 3

回答用户5049376已经给了我不起作用。 url属性未定义。

console.log(this.activatedRoute.snapshot.firstChild.url[0].path);

而不是我使用firstChild属性。

PictureBox

Answer 4

这适合我。

导入此内容：

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

然后将其传递给构造函数：

path: any;

constructor(private router: Router) {
  this.path = this.router.url;
  console.log(this.path);
}

Answer 5

我尝试使用其他回复，但最终都是未定义。

所以我这样做了：

#AppComponent
constructor(private router: Router){
  // Subscribe to RouterEvents
  this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationStart) {
      // Could add more chars url:path?=;other possible
      const urlDelimitators = new RegExp(/[?//,;&:#$+=]/);
      let currentUrlPath = event.url.slice(1).split(urlDelimitators)[0];
      console.log('URL_PATH: ', currentUrlPath);
    }
  });
}

我订阅了路由器更改，因此当NavitionStartEvent发生时，找到了新的URL_PATH。

Answer 6

对我来说，这是我设法做到的最干净的解决方案。希望对您有帮助

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

constructor(private router: Router){}

getUrlWithoutParams(){
   let urlTree = this.router.parseUrl(this.router.url);
   urlTree.queryParams = {}; 
   return urlTree.toString();
}

Answer 7

如果您不需要支持IE，可以使用URL class对字符串中的网址组件进行反向工程：

(new URL(this.router.url), 'x:/').pathName

考虑到你的例子，上面的代码只会产生＆＃34; / MyRouterName＆＃34; ＆＃34; / MyRouterName？type = abc＆＃34;。

的一部分

注意：＆＃39; x：/＆＃39;部分仅存在以满足URL类＆＃39;需要一个协议1（this.router.url不提供）。

Answer 8

这不是简单有效吗？

let path = this.router.url.split("?")[0];

Answer 9

以下代码可同时使用：非哈希和哈希（例如https://site/#/user)urls

public openInNewTab(router: Router, namedRoute ) {
      let newRelativeUrl = router.createUrlTree([namedRoute]);
      let baseUrl = window.location.href.replace(router.url,'');

      window.open(baseUrl + newRelativeUrl, '_blank');
}

Answer 10

以下方法在Angular 8中对我有用

URL

http：// localhost：4200 / admin / audit_trail

我想提取什么？

管理员

代码

constructor(
    private route: ActivatedRoute
) {
    const path = this.route.snapshot.parent.routeConfig.path;
}

// path = 'admin'

Answer 11

很好的答案在这里......请允许我添加一个替代方案：

UrlReflectionService 库提供的 @bespunky/angular-zen。

import { Component            } from '@angular/core';
import { UrlReflectionService } from '@bespunky/angular-zen/router-x';

@Component({
    selector   : 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls  : ['./demo.component.css']
})
export class DemoComponent
{   
    constructor(public urlReflection: UrlReflectionService)
    {
        // use properties (e.g. `routeUrl`, `queryString`) from `this.urlReflection`
        // to extract parts of the current url

        // use methods (e.g. `routeOf()`, `queryStringOf()`) from `this.urlReflection`
        // to extract parts of any url 
    }
}

Live Example

TLDR 1

该服务方便了各种 url 提取和操作操作，甚至公开了它内部使用的 RegEx 对象，以备您需要进一步定制。

TLDR 2

记住：

1. <块引用>

   npm install @bespunky/angular-zen

2. 导入 RouterXModule（对于 root 或 child）。

Answer 12

您可能想要获取所有内容，包括某些 url 中的尾随 #，而且您可能不像我一样喜欢导入 :) 我是如何做到这一点的：

const url: string = window.location.href;
const host: string = window.location.host;
const hostIndex: number = url.indexOf(host);

const path: string = url.substring(hostindex).replace(host, '');
console.log(path);