Question

在Angular应用中，我有一个组件，用于加载从API返回的某些数据的网格视图。我在组件上还有一些过滤器，用户可以利用这些过滤器过滤返回的数据。

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

所以我认为我需要做的是使用ngOnInit（）从浏览器窗口中读取url状态-由于此时所有过滤器仍然存在，作为查询字符串的一部分，如下所示：< / p>

import { createLocalVue, shallowMount, config } from '@vue/test-utils';

config.mocks.$store = {
  state: {
    user: {
      sexy: true
    },
  },
};

根据上述url /查询字符串，应在过滤“ firstName”：“ John”之后加载数据。

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

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

基本上，当我希望从浏览器窗口中的url / query字符串的当前状态动态读取该语法时，我只需要知道语法是什么样子。因为那样，重新应用组件时，无论应用了什么过滤器，它们都将相应地工作-因为查询字符串中仍然可以使用它们。

更新：

在下面的评论之后，我想我可以做这样的事情：

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

然后，因为这是constructor(private route: ActivatedRoute) {}，所以我会做类似的事情：

observable

这样的作品行吗？

Answer 1

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

请参见docs about router。

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

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

1 个答案: