Angular 2: как получить параметры маршрута из-за пределов маршрутизатора-розетки

Вопрос, аналогичный Angular2 Получить параметры маршрутизатора вне маршрутизатора-выхода но ориентируясь на выпускную версию Angular 2 (то есть версию 3.0.0 маршрутизатора). У меня есть приложение со списком контактов и выходом маршрутизатора для отображения или редактирования выбранного контакта. Я хочу убедиться, что правильный контакт выбран в любой момент (в том числе при загрузке страницы), поэтому я хотел бы иметь возможность читать параметр «id» из маршрута всякий раз, когда маршрут изменяется.

Я могу получить доступ к событиям маршрутизации, подписавшись на свойство событий маршрутизатора, но объект Event просто дает мне доступ к необработанному URL-адресу, а не к его проанализированной версии. Я могу разобрать это с помощью метода parseUrl маршрутизатора, но этот формат не особенно полезен и будет довольно хрупким, поэтому я бы не стал его использовать. Я также просмотрел все, хотя свойство routerState маршрутизатора в событиях маршрутизации, но params всегда является пустым объектом в моментальном снимке.

Есть ли реальный прямой способ сделать это, который я только что пропустил? Должен ли я обернуть список контактов в маршрутизатор-выход, который никогда не меняется, чтобы заставить это работать, или что-то в этом роде?


javascript angular routing angular2-routing
person Ixonal    schedule 03.10.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я боролся с этой проблемой в течение всего дня, но я думаю, что наконец-то понял, как это сделать, прослушивая, в частности, одно из событий маршрутизатора. Будьте готовы, это немного сложно (уродливо?), но на сегодняшний день это работает, по крайней мере, с последней версией Angular (4.x) и Angular Router (4.x). Этот фрагмент кода может не работать в будущем, если они что-то изменят.

По сути, я нашел способ получить путь маршрута, а затем самостоятельно перестроить карту пользовательских параметров.

Итак, вот оно:

import { Component, OnInit } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'outside-router-outlet',
  templateUrl: './outside-router-outlet.component.html',
  styleUrls: ['./outside-router-outlet.component.css']
})

export class OutSideRouterOutletComponent implements OnInit {
  path: string;
  routeParams: any = {};

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe(routerEvent => {
      if (routerEvent instanceof RoutesRecognized) {
          this.path = routerEvent.state.root['_routerState']['_root'].children[0].value['_routeConfig'].path;
          this.buildRouteParams(routerEvent);
      }
    });
  } 

  buildRouteParams(routesRecognized: RoutesRecognized) {
    let paramsKey = {};
    let splittedPath = this.path.split('/');
    splittedPath.forEach((value: string, idx: number, arr: Array<string>) => {
      // Checking if the chunk is starting with ':', if yes, we suppose it's a parameter
      if (value.indexOf(':') === 0) {
        // Attributing each parameters at the index where they were found in the path
        paramsKey[idx] = value;
      }
    });
    this.routeParams = {};
    let splittedUrl = routesRecognized.url.split('/');
    /**
     * Removing empty chunks from the url,
     * because we're splitting the string with '/', and the url starts with a '/')
     */
    splittedUrl = splittedUrl.filter(n => n !== "");
    for (let idx in paramsKey) {
      this.routeParams[paramsKey[idx]] = splittedUrl[idx];
    }
    // So here you now have an object with your parameters and their values
    console.log(this.routeParams);
  }
}
person schankam    schedule 26.10.2017

arrow_upward
0
arrow_downward

Если кто-то искал последнее решение этой проблемы (угловой 8), я наткнулся на эту статью, которая очень хорошо сработала для меня.

https://medium.com/@eng.ohadb/how-to-get-route-path-parameters-in-an-angular-service-1965afe1470e

Очевидно, вы можете сделать ту же самую реализацию прямо в компоненте за пределами выхода маршрутизатора, и он все равно должен работать.

    export class MyParamsAwareService {
  constructor(private router: Router) { 
    this.router.events
      .pipe(
        filter(e => (e instanceof ActivationEnd) && (Object.keys(e.snapshot.params).length > 0)),
        map(e => e instanceof ActivationEnd ? e.snapshot.params : {})
      )
      .subscribe(params => {
      console.log(params);
      // Do whatever you want here!!!!
      });
  }

В надежде избавить от той же борьбы, через которую я прошел.

person Mark Odey    schedule 27.01.2020