Angular - Получить каждый сегмент маршрута

Question

Сначала позвольте мне заранее извиниться, если этот вопрос уже задавался раньше - я уверен, что он есть, но я не смог его найти. Возможно, я не использую правильную терминологию, поэтому, если вы найдете ответ где-нибудь, пожалуйста, дайте мне знать:)

Я нахожусь в ситуации, когда мне нужно собрать все пути / параметры, но у меня нет Я не нашел ни одного очевидного решения ни в ActivatedRoute, ни в Router.

Позвольте мне объяснить пример: текущий URL в приложении: /product/details/10

В настоящее время я могу получить то, что я хотите, выполнив: router.url.split('/'), что разделит строку в массиве с 3 записями: ['product', 'details', '10']

Однако в некоторых случаях мой маршрут будет включать параметр, поэтому что-то вроде этого:

/product/search?text=chair

В этом случае я могу снова сделать еще одно деление на '?', Чтобы получить параметр text: chair.

Хотя это работает, это не так Выглядело очень красиво, и я подумал, что Angular должен иметь более разумный способ достижения того же результата.

В идеале, я хотел бы вызвать какой-нибудь метод, который разделяет это на объект, подобный этому:

{
 paths: ['product', 'search'],
 param: { name: 'text', value: 'chair' }
}

Нет необходимости иметь эту точную структуру. или что-то еще, но я надеюсь, что вы понимаете, чего я пытаюсь достичь; Простой способ получить каждый сегмент маршрута, а также любые включенные параметры

Заранее спасибо!

Answer 1

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

Для внедрения просто выполните следующее:

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

export class MyComponent {
  constructor(private route: ActivatedRouteSnapshot) {}
}

Скажем, у нас есть маршрут product/details/:id.

Если мы перейдем к URL /product/details/5?key=value, мы можем извлечь следующую информацию:

Сегменты

ngOnInit() {
  const snapshot = this.route.snapshot;

  const segments = snapshot.url.map(x => x.path);

  console.log(segments);

  // [ "product", "details", "5" ]  
}

Params

ngOnInit() {
  const paramMap = snapshot.paramMap;

  const paramValues = paramMap.keys.map(x => {
    return {
      key: x,
      value: paramMap.get(x)
    };
  });

  console.log(paramValues);

  // [ { key: "id", value: "1" } ]
}

Параметры запроса

ngOnInit() {
  const queryParamMap = snapshot.queryParamMap;

  const queryParamValues = queryParamMap.keys.map(x => {
    return {
      key: x,
      value: queryParamMap.get(x)
    };
  });

  console.log(queryParamValues);

  // [ { key: "key", value: "value" } ]
}

DEMO: https://stackblitz.com/edit/router-template-rsi4se

Answer 2

Возможно, это не полный ответ, но, надеюсь, вам стоит начать.

Попробуйте:

import { combineLatest } from 'rxjs/observable/combineLatest';
import { map } from 'rxjs/operators';
....
constructor(private route: ActivatedRoute) { }

ngOnInit() {
  combineLatest(
    this.route.url.pipe(
        map(urls => urls.map(url => url.path))
    ),
    this.route.queryParams,
  ).subscribe(([paths, queryParams]) => {
    console.log(paths);
    console.log(queryParams);
    console.log({ paths, param: queryParams }); // => This should be what you are looking for
  });
}