Question

Angular 5应用程序有一个数据服务，它返回指定category中的产品并且有分页。类别在路由中指定为参数。分页是和查询参数。 Url看起来像这样：/category?page=2。（类别是变量）

问题： 该组件订阅了queryParams和paramMap。如果只使用了一个，那很好，但是从'/ category？page = 2'到'/ anotherCategory'会触发两者，这意味着数据被拉两次（并且取决于哪个observable首先返回数据，这会引入不需要的结果）。在这种情况下，使用snapshot不起作用。

我无法找到解决此问题的最佳做法。

@Component({..}}

constructor(private route: ActivatedRoute) {}

ngOnInit() {

    this.route.queryParams.subscribe((params: Params) => {
        this.currentPage = params['page'];
        this.getData(this.category, this.currentPage);
    });

    this.route.paramMap.subscribe ((params: Params) => {
        this.category = params.get('categoryName');
        this.getData(this.category, this.currentPage);
    });
}

注意：为了简单起见，代码稍作修改并剥离。

Answer 1

您的疑问非常符合逻辑，我们必须在这里使用这两个订阅，因为快照不会检测相同路径的参数更改。

我们在这里可以做的是检查getData函数中的Activated路由。因此，如果拉取数据的参数与我们的路线不匹配，那么我们可以简单地返回。

我们只会在两个参数都与激活的路线匹配时获取数据。可以通过快照检查路径中的当前参数。

如果需要进一步澄清，请告诉我。

由于

Answer 2

您可以使用combineLatest创建一个可观察对象，该对象在路由参数或查询参数发生更改时会触发：

combineLatest( this.route.params, this.route.queryParams ).pipe( map(([params, qparams]) => { //do your stuff here }) )

Angular订阅路由和路由参数

2 个答案: