angular - 使用 Angular 从 URL 中提取 id(2+ 直到最新)

Question

您好，我正在尝试使用 Angular2 提取 URL 的 ID 部分。

http://localhost:3000/item/187809

我一直在 onInit 中使用 ActiveRoute 但运气不好

     this.route.queryParams.forEach((params: any) => {
       console.log("QUERYPARAMS");
       console.log(params);
     });

也试过像这样订阅路由变化

    this.routeSub = this.route.queryParams.subscribe(params => {
       console.log(params);
       console.log(+params['id']);
    }); 

但是 params 只是一个空对象。

我将路由定义为像这样的惰性路由

    {
        path: item',
        children: [
           { path: ':id', loadChildren: './item/item.module#ItemModule'},
        ]
    },

我认为问题在于我有一个 header 组件和一个包含延迟加载的路由子组件的主要组件。我正在尝试将 id 加载到 header 组件中。

知道缺少什么吗？

Answer 1

订阅和取消订阅路由参数

1. 确保您已经配置了一个需要像这样的参数的路由:

{path: 'item/:id', component: SomeItemComponent}

1. 为您的路线订阅声明一个变量。导入 ActivatedRoute(不是 ActiveRoute)并将其注入(inject)到您的组件构造函数中。

private routeSub: Subscription;
constructor(private route: ActivatedRoute) { }

1. 在同一个组件的 ngOnInit 中，您可以通过像这样订阅它来访问可观察到的 params 中的数据:

ngOnInit() {
  this.routeSub = this.route.params.subscribe(params => {
    console.log(params) //log the entire params object
    console.log(params['id']) //log the value of id
  });
}

1. 在 ngOnDestroy 内部，取消订阅以防止内存泄漏。

ngOnDestroy() {
  this.routeSub.unsubscribe();
}

更新 - 2021 年 1 月

route.params 和route.queryParams 有很大区别。

route.params，在订阅时返回一个对象，其中包含键(来自您的路由参数，请参阅第 1 步)和导航时提供的字符串值到路线。例如:

example.com/item/1

{
  itemId: '1'
}

route.queryParams，当被订阅时，返回一个对象，其键和字符串值来自query string (wiki)在 URL 中。 例如:

example.com/welcome?var1=abc&var2=cde

{
  var1: 'abc',
  var2: 'cde'
}

如果 URL 中不存在查询字符串，

route.queryParams 将为 undefined。我相信 OP，评论中的一些用户错误地使用了这个而不是 route.params。