Получить текущий маршрут без параметров

parseTree from Router помогает получать сегменты без каких-либо знаний о структуре 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('/');

Начните отсюда. Если у вас есть дополнительные розетки, отрегулируйте их по мере необходимости.

Чтобы получить текущий маршрут без параметров запроса, вы можете использовать одну строку ниже:

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

Для меня это самое чистое решение, которое мне удалось сделать. Я надеюсь, что это помогает

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

constructor(private router: Router){}

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

Если вы используете webpack, вы можете использовать модуль url polyfill, который поставляется вместе с модулем Angular Router.

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

Короткий и простой чистый js.

location.pathname

Собственный javascript будет работать, чтобы разделить URL-адрес на логические части. Проверьте объект "location" (или 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'

У меня было аналогичное требование, в зависимости от того, какой маршрут я использовал для получения компонента, я хотел получить разные результаты.

Я обнаружил, что activatedRoute.routeConfig.path был отличным вариантом, и мне было легко увидеть, какой маршрут использовался.

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

это может помочь вам:

1. Импортировать маршрутизатор:

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

2. Подпись в конструкторе:

   constructor(private _router: Router) {}
   

3. Проверьте свойство событий _router:

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

Чтобы получить текущий маршрут без параметров запроса, вы можете использовать одну строку ниже:

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

В моем случае мне нужно было сравнить предыдущий маршрут и новый маршрут при изменении только :id в URL через router.navigate. Поскольку мне нужен был путь без разных идентификаторов, я получил исходный путь маршрута:

/* 
    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
    }
});

Я использую 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-адрес и параметры запроса.

Чтобы убедиться, что ваша стратегия определения местоположения инициализирована, вы можете использовать метод подписки, например:

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

Но в этом случае вы запускаете свою функцию при каждом изменении маршрутизатора, поэтому вам нужно защитить этот случай, если это нежелательно.

Ни один из них не работал для меня.

Есть много подходов к этому, но в этом случае была установлена ​​защита, чтобы пользователи не переходили по определенным URL-адресам. Это работало нормально, за исключением случаев, когда URL-адрес имел параметры, поскольку переданный URL-адрес всегда содержал все параметры.

E.G: myPage/param1/param2

Or: 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> { ... }