Question

与Angular2 Get router params outside of router-outlet类似的问题，但针对的是Angular 2的发布版本（因此版本3.0.0的路由器）。我有一个应用程序，其中包含联系人列表和路由器插座，用于显示或编辑所选联系人。我想确保在任何时候选择正确的联系方式（包括页面加载），所以我希望能够阅读＆＃34; id＆＃34;路线改变时路线的参数。

我可以通过订阅路由器的事件属性来获取路由事件，但是Event对象只是让我访问原始URL，而不是它的解析版本。我可以使用路由器的parseUrl方法解析它，但这种格式特别有用并且相当脆弱，所以我宁愿不使用它。我还看了路由事件中路由器的routerState属性，但是params在快照中始终是一个空对象。

有没有一种实际的直接方式来做到这一点，我只是错过了？我是否必须将联系人列表包装在一个永不改变的路由器插座中，以使其工作，或类似的东西？

Answer 1

我一整天都在努力解决这个问题，但我想我终于找到了一种方法，通过特别是听一个路由器事件来解决这个问题。做好准备，它有点棘手（丑陋？），但截至今天它已经开始工作了，至少使用最新版本的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);
  }
}

Answer 2

如果有人在寻找这个问题的最新解决方案（角度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!!!!
      });
  }

希望能避免我经历的同样的努力。

Angular 2：如何从路由器插座外部获取路径的参数

2 个答案: