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

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

В моем случае мне нужно было сравнить предыдущий маршрут и новый маршрут при изменении только : 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
    }
});

Ответ 5

Я использую locationStrategy, как в ответе accept, но с .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> не инициализируется, никакие Угловые службы не могут правильно возвращать URL и параметры запроса.

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

Собственный 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'

Ответ 9

более короткий синтаксис состоит в том, чтобы использовать класс LocationStrategy из @углового/общего для представления и чтения состояния маршрута непосредственно из URL-адреса браузера, который более удобен, чем this.router.url при попытке получить URL-адрес маршрутизатора в случае углового приложения с несколькими модули.

   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('?') чтобы получить конечный результат.