Как получить только путь из полной строки URL

При использовании Router (this.router.url) я получаю строку /MyRouterName?type=abc, sometime /MyRouterName если не имеет параметра

Могу ли я получить путь /MyRouterName (для всех случаев) из полного URL- /MyRouterName?

Ответы

Ответ 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); 
}

Ссылка на исходный ответ SO от Jose G Varanam Как получить текущий маршрут

Ответ 2

Если вы перезагрузите страницу, вы не сможете получить маршрут маршрута по Router или ActivatedRoute. Вы можете использовать window.location.pathname вместо этого.

Ответ 3

Ответ user5049376 дал мне не работу. свойство url было undefined.

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

вместо этого я использовал свойство firstChild.

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

Ответ 4

Это работает для меня.

Импортируйте это:

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

затем передайте его конструктору:

path: any;

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

Ответ 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.

Ответ 6

Если вам не нужна поддержка IE, вы можете использовать класс URL для обратного инжиниринга компонентов url из строки:

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

Учитывая ваш пример, приведенный выше код даст только часть "/MyRouterName" из "/MyRouterName? Type = abc".

Примечание. Часть "x:/" существует только для удовлетворения класса URL-адресов, необходимого для protocoll (который this.router.url не предоставляет).

Ответ 7

Разве это не просто и не эффективно?

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