订阅Angular 2中的路径参数和数据

Question

我的表单需要访问路由参数和数据.它们是可观察的,所以我需要订阅才能访问它们的值.我的问题是,如何在一次订阅中同时访问它们？

this._route.params.subscribe(
  params => {
    getData(params['id'], data['id2'] <=== i need data value too. how do i get this???)
  });

为什么棱角分裂将它们放在两个独立的可观测量中？

Answer 1

我如何在一个订阅中一起访问它们？

你可以使用ActivatedRouteSnapshot你的 ActivatedRoute.ActivatedRouteSnapshotinterface has params和queryParamsproperty,你可以同时获得这两个值.

不要试图ActivatedRouteSnapshot直接注射.它不会起作用.您必须注入ActivatedRoute并访问其snapshot财产.

注意:我们只使用这种技术获得参数的初始值

constructor(private _route: ActivatedRoute) {
    console.log(this._route.snapshot.params);
    console.log(this._route.snapshot.data);
}

示例Plunker

另一种方式,因为params和data是observable,我们可以使用zip运营商合并它们,然后访问它们在一个单一的订阅.但请注意,如果其中一个params或data没有值,则不会触发订阅.

this._route.params
  .zip(this._route.data)
  .subscribe((value) => {
    this.id = value[0]["id"]; // get param
    this.data = value[1]; // get data value
  });

示例Plunker

为什么棱角分裂将它们放在两个独立的可观测量中？

我已经阅读了文档,你是对的,有单独的可观察对象,但我不知道为什么.

Answer 2

与Michael的回复类似，您可以使用ActivatedRouteSnapshotfrom中的ActivatedRoute来获取路线的data。

您可以将其放入params订阅中，即使该路由不包含任何订阅，也会被触发params。

this.route.params.subscribe((params) => {
  console.log(params);
  console.log(this.route.snapshot.data);
});