javascript - Angular 2 : How do I get params of a route from outside of a router-outlet

标签 javascript angular routing angular2-routing

Angular2 Get router params outside of router-outlet 类似的问题但针对的是 Angular 2 的发布版本(因此是路由器的 3.0.0 版)。我有一个带有联系人列表和路由器 socket 的应用程序,用于显示或编辑所选联系人。我想确保在任何时候(包括页面加载时)都选择了正确的联系人,所以我希望能够在路线更改时从 route 读取“id”参数。

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

是否有一种我刚刚错过的真正直接的方法来做到这一点?我是否必须将联系人列表包装在一个永远不会改变的路由器 socket 中才能让它工作,或者类似的东西?

最佳答案

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

希望避免我经历过的同样的挣扎。

关于javascript - Angular 2 : How do I get params of a route from outside of a router-outlet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39836600/

相关文章:

c# - 当 url 的一部分已经是另一个路由时,ASP.NET Core 3.1 中的动态路由

javascript - bs-tooltip 限制双向数据绑定(bind)

javascript - 删除 yAxis 时保留一些循环迭代 - Highcharts/Angular

windows - 路由来自特定应用程序的流量

带有 Keycloak 的 Angular/Spring Boot 抛出 403

angular - 如何使用 Angular Material 实现范围内联日历?

angular - Angular 2 中的被动链接 - <a href =""> 等效

javascript - RegExp 中的可选字符串

javascript - HTML 'Title' 属性显示单词 'undefined' - 例如。 'Home Pageundefined'

javascript - 如何使用索引号而不是对象的 id 路由到各个页面?