Question

我需要在Angular 2中获得没有params的当前路径，我找到了一种方法来获取当前路径的params如下：

 this.router.url

然后分开它：

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

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

Answer 1

来自parseTree的

Router有助于在不了解网址结构的情况下获取细分。

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('/');

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

Answer 2

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

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

constructor(private router: Router){}

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

Answer 3

要获取不带查询参数的当前路线，可以使用以下提到的单行：

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

Answer 4

这可以帮到你：

导入路由器：

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

构造函数中的签名：

constructor(private _router: Router) {}

检查 _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
        });

Answer 5

如果您使用的是 webpack ，则可以使用捆绑的url polyfill 模块以及Angular Router模块。< / p>

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

Answer 6

在我的情况下，我需要比较之前的路线和新路线，只需通过 router.navigate 更改网址上的：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
    }
});

Answer 7

我在接受答案中使用locationStrategy但使用.split()方法。 LocationStrategy在Angular 4＆amp ;; 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和查询参数。

为了确保您的位置策略是初始化，您可以使用订阅方法，如：

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

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

Answer 8

这些都不适合我。

有很多方法，但在这种情况下，有一个警卫可以阻止用户访问特定的URL。这工作正常，除非URL有参数，因为传递的URL总是包含所有参数。

E.G：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> { ... }

Answer 9

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

我发现activatedRoute.routeConfig.path是一个不错的选择，这使我很容易查看所使用的路线。

constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
  if (this.route.routeConfig.path === 'heroes/:id')

Answer 10

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

import NetworkGraph from 'react-native-network-graph';

Answer 11

简短的纯js。

location.pathname

Answer 12

要获取不带查询参数的当前路线，可以使用以下提到的单行：

this.url = this.url.substr(0, this.url.lastIndexOf("?"));

Answer 13

更短的语法是使用@ angular / common中的LocationStrategy类直接从浏览器的URL表示和读取路由状态，这比尝试获取路由器URL时更方便this.router.url具有多个模块的Angular应用程序的情况。

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


export class MyComponent implements OnInit {

    constructor(private url:LocationStrategy) { }

    ngOnInit() {
          //this will log the current url
        console.log(this.url.path());
    }

}

然后使用.split('?')来获得最终结果。

获取没有参数的当前路线

13 个答案: