54

我需要在 Angular 2 中获取没有参数的当前路线，我找到了一种使用参数获取当前路线的方法，如下所示：

 this.router.url

然后拆分它：

 this.router.url.split(';')[0]

但这看起来是一种解决方法，我认为应该有更好的方法？

4

12 回答 12

45

要获取没有查询参数的当前路线，您可以使用下面提到的单行：

this.router.url.split('?')[0]
于 2018-10-17T06:51:29.293 回答
40

parseTreefromRouter帮助在不了解 url 结构的情况下获取段。

import { Router } from '@angular/router';
...
constructor(private router: Router) {}
...
const urlTree = this.router.parseUrl(url);
const urlWithoutParams = urlTree.root.children['primary'].segments.map(it => it.path).join('/');

从这里开始。如果您有辅助插座，请根据需要进行调整。

于 2017-09-08T02:44:28.080 回答
18

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

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

getUrlWithoutParams(){
   let urlTree = this.router.parseUrl(this.router.url);
   urlTree.queryParams = {}; 
   urlTree.fragment = null; // optional
   return urlTree.toString();
}
于 2020-06-05T12:01:03.647 回答
9

简短而简单的纯js。

location.pathname
于 2020-09-25T00:07:12.870 回答
5

本机 javascript 将用于将 url 拆分为逻辑部分。查看“位置”（或 window.location）对象。例如，在 URL https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2处使用位置会产生

location.origin === 'https://example.com/pathname1/pathname2'
location.href === 'https://example.com/pathname1/pathname2?queryParam1=1&queryParam2=2'
location.pathname === '/pathname1/pathname2'
location.search === '?queryParam1=1&queryParam2=2'
于 2019-05-10T00:58:13.117 回答
5

如果您使用的是webpack，则可以使用捆绑的url polyfill模块以及 AngularRouter模块。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as url from 'url'

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

  public constructor(public readonly router: Router) {}

  public ngOnInit() {
    const urlInfo = url.parse(this.router.url)
    console.log(urlInfo.pathname)
  }
}
于 2020-07-31T15:34:05.403 回答
3

我有类似的要求，具体取决于我用来获取组件的路径，我想要不同的结果。

我发现这activatedRoute.routeConfig.path是一个很好的选择，让我很容易看到使用了哪条路线。

constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
  if (this.activatedRoute.routeConfig.path === 'heroes/:id')
于 2019-05-03T04:56:27.767 回答
2

这可以帮助你：

  1. 导入路由器：

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

  2. 构造函数中的签名：

    constructor(private _router: Router) {}

  3. 检查_router events 属性：

    this._router.events
    .subscribe(
        (url:any) => {
            let _ruta = "";
            url.url.split("/").forEach(element => {
                if(element!=="" && _ruta==="")
                    _ruta="/"+element;
                });
            console.log("route: "+_ruta); //<<<---- Root path
            console.log("to URL:"+url.url); //<<<---- Destination URL 
            console.log("from URL:"+this._router.url);//<<<---- Current URL
        });
于 2017-05-01T15:32:43.997 回答
1

要获取没有查询参数的当前路线，您可以使用下面提到的单行：

this.url = this.url.substr(0, this.url.lastIndexOf("?"));
于 2020-11-12T06:04:29.333 回答
0

在我的情况下，我需要比较以前的路由和新路由，当通过router.navigate仅更改url 上的:id时。由于我想要没有不同 id 的路径，所以我得到了路由的原始路径：

/* 
    Routes = [
        { path: 'main/details/:id', component: DetailComponent }
    ]

    previousRoute = '/main/details/1'
    newRoute      = '/main/details/2'
*/

this.routeSubscription = this.router.events.filter((event) => event instanceof ResolveStart)
                                           .pairwise() // returns previous and current events
                                           .subscribe((ev: [ResolveStart, ResolveStart]) => {

    let sameRoute = ev[0].state.root.firstChild.routeConfig.path == ev[1].state.root.firstChild.routeConfig.path ?
                       ev[0].state.root.firstChild.routeConfig.path : undefiend;
    if (sameRoute) {
        // Same routes, probably different ids 
        console.log(sameRoute) // gives 'main/details/:id'
    } else {
        // Different routes
    }
});
于 2017-12-14T10:59:39.020 回答
0

我在接受答案中使用 locationStrategy ，但使用.split()方法。LocationStrategy 在 Angular 4 和 Angular 5 中完美运行；

import {LocationStrategy} from '@angular/common';

export class MyService {
    constructor(private locationStrategy: LocationStrategy) {
    }

    public getUrl(filters: FilterConfig[]): void {
        const url = this.locationStrategy.path();
        const urlArray = url.split('?');

        return urlArray[0];
    }
}

您应该进行的另一件事是确保<router-outlet>在尝试获取locationStrategy.path(). 如果<router-outlet>未初始化任何 Angular 服务，则无法正确返回 URL 和查询参数。

为确保您的位置策略已初始化，您可以使用 subscribe 方法，例如：

this.router.events.subscribe((evt) => {
...
}

但是在这种情况下，您会在每次路由器更改时触发您的功能，因此如果不需要，您需要保护这种情况。

于 2018-01-31T09:15:33.683 回答
0

这些都不适合我。

有很多方法可以解决这个问题，但在这种情况下，有一个保护措施可以阻止用户访问特定的 URL。这工作得很好，除非 URL 有参数，因为传递的 URL 总是包含所有参数。

例如：myPage/param1/param2

或者： myPage?param1=1&param2=2

在这种情况下，我只想要myPage.

我编写了下面的代码，我不喜欢它，我确信它可以改进，但到目前为止还没有找到任何其他有效的方法：

    let url: string = state.url;
    let urlParams: string[];

    if (url.includes("?")) {
        url = url.substr(0, url.indexOf('?'));
    } else {
        urlParams = route.url.toString().split(';')[0].split(',');

        if (urlParams.length > 1) {
            urlParams.shift(); // Remove first element which is page name

            // Get entire splitting on each param
            let fullUrlSegments: string[] = state.url.split('/');
            // Remove number of params from full URL
            fullUrlSegments = fullUrlSegments.slice(0, fullUrlSegments.length - urlParams.length);

            url = fullUrlSegments.join('/');
        }
    }

    alert(url);

state.url来自CanActivate（或注入Router）的实现。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) Observable<boolean> { ... }
于 2018-03-27T15:55:49.267 回答