从 URL/查询字符串预加载 Angular 组件答案

【问题标题】：Pre-load Angular Component From URL/Query String从 URL/查询字符串预加载 Angular 组件
【发布时间】：2018-09-25 17:44:08
【问题描述】：

在我的 Angular 应用程序中，我有一个组件，我在其中加载从 API 返回的一些数据的网格视图。我在组件上也有一些过滤器，用户可以使用它们来过滤返回的数据。

这一切都按预期工作——直到用户离开，然后返回到组件。此时不再应用过滤器选择。换句话说，组件在其“原始”状态下重新加载，就好像没有选择过滤器一样。

所以我认为我需要做的是使用 ngOnInit() 从浏览器窗口读取 url 状态——因为此时所有过滤器仍然存在，作为查询字符串的一部分，如下所示：

http://localhost:4200/consulting;page=1;pn_firstName.e=1;pn_firstName.v=John;pn_lastName.e=;pn_lastName.v=

根据上面的 url/查询字符串，数据应该在过滤“firstName”:“John”后加载。

所以，我的问题是，在 Angular 中从 ngOnInit 中这样的 url 预加载的语法是什么样的？像这样？

ngOnInit() {
   this.router.navigateByUrl(`consulting/${}`); // Should be current url/query string in the browser window
}

基本上，当我希望从浏览器窗口中的 url/查询字符串的当前状态动态读取它时，我只需要知道语法应该是什么样子。因为这样一来，任何已应用的过滤器都将在重新加载组件时相应地工作——因为它们在查询字符串中仍然可用。

更新：

在下面发表评论后，我想我可以这样做：

constructor(private route: ActivatedRoute) {}

然后，因为这是observable，我会做类似的事情：

ngOnInit() {
    this.loadData()
}

loadData() {
    this.router.navigate([this.route.queryParams.toArray()]);
}

这样的事情会起作用吗？

【问题讨论】：

【解决方案1】：

将activatedRoute: ActivatedRoute 注入到您的组件中，查询参数可通过activatedRoute.queryParams 或activatedRoute.queryParamMap 获得。

这里是simple stackblitz demo，它只是呈现查询参数，您可以使用query parameters here。

【讨论】：