Angular 5在查询参数更改时显示浏览器警报

Question

我有一个父组件 Item ，其路由为“ / Item”。

我有两个子组件名称，分别是 Catalogue 组件和 AddSize 组件。

默认情况下，目录组件将加载路由'/item?q=catalogue'。然后，用户选择产品，然后将路由更改为'/item?q=add_size'，并加载AddSize组件。

现在，如果浏览器单击浏览器后退按钮，则查询参数将从'/item?q=add_size'更改为'/item?q=catalogue'。

当用户在'/item?q=add_size'路由浏览器警报中单击后退按钮时，我遇到了问题。

在这种情况下，护卫服务和主机侦听器无济于事，因为我在同一条路线上，并且期望浏览器仅针对查询参数更改发出警报。

我们有其他替代解决方案吗？

Answer 1

您需要为您的路线创建订阅。

this._route.queryParams
    .subscribe(
        params => {
            this.q = params['q'];
            if (q == 'add_size') 
            {
                do something
            }   
            else if (q == params['catalogue']) 
            {
                do something else
            }       
            });

将其放入您的OnInit（）代码中。