0

我正在创建 Angular 4 应用程序。碰巧我需要从我的 URL 获取不同深度级别的参数，这导致我获取参数的方式不统一。

假设我们有这个 URL：

https://mysite/companies/:companyID/cups/:cupId/drawings/:drawId

通常，根据角度文档，我们需要执行以下操作：

ngOnInit() {
this.activatedRoute.parent.parent.params.subscribe((params: Params) => 
{this.companyId = params['companyId'];
});
this.activatedRoute.parent.params.subscribe((params: Params) => 
{this.cupId = params['cupId'];
});
this.activatedRoute.params.subscribe((params: Params) => 
{this.drawId = params['drawId'];
});
}

请注意，这是考虑到我们在 DrawDetailComponent 内部，这意味着我们在一个组件中，该组件是此层次结构中的最后一个子组件。

另请注意，根据您在此层次结构中的深度，您需要添加|减去 .parent 到您的激活路由，以便在正确的位置，您可以成功获取您正在寻找的参数。

那么，是否可以通过同一个调用获得来自您的 url 的所有参数？

就像是：

this.activatedRoute.parent.parent.params.subscribe((params: Params) => 
    {this.companyId = params['companyId'];
    {this.cupId = params['cupId'];
    {this.drawId = params['drawId'];
});

我们希望有一种统一的、不依赖于深度的方式来从我们的 URL 中检索所有参数。

实际上我们也尝试过类似的东西：

const property = 'companyId';
this.activatedRoute.pathFromRoot.forEach((item) => {
  if (item.snapshot.params.hasOwnProperty(property)) {
    item.params.subscribe((params: ParamMap) => {
      this.companyId = params[property];
    });
  }
});

但我们希望找到一种更好、更通用、可测试的方式。

通常，在像 Django 这样的框架中，开发人员能够一步收集来自 url 所需的所有信息。在 Angular 的情况下，订阅自动处理这些参数的更改是可以的，但恕我直言，它远非舒适 + 可测试。

4

1 回答 1

1

我认为你应该能够做这样的事情：

this.activatedRoute.params.subscribe(params => {
    this.companyId = params['companyId'];
    this.cupId = params['cupId'];
    this.drawId = params['drawId'];
});

我在我的应用程序中遇到了类似的事情。请注意，我不会去找父母。激活的路线应该有你需要的一切。

希望这可以帮助！

于 2017-07-26T01:42:42.630 回答