Angular擦除所有查询参数

Question

与How to keep query string parameters in URL when accessing a route of an Angular 2 app?

相关但不重复

我有一个非常基本的Angular应用程序，当我添加一个查询参数时，它会在代码命中app.component构造函数之前被删除（从浏览器的url和其他任何地方看起来）。

注意：初始加载（以及后续重新加载）查询参数似乎被剥离

示例：导航到localhost:8081/calculator?a=1已更改为localhost:8081/calculator

我在Angular 4.3.1,4.4.6和5.0.4中尝试了这个，结果相同。

这是我的路线配置：

const appRoutes: Routes = [
    {
        path: 'calculator',
        component: CalculatorComponent
    }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

这是主要的应用程序组件的构造函数：

public constructor(private router: Router, private route: ActivatedRoute) {
    console.log('entered app constructor');
    this.route.queryParamMap.subscribe(params => {
        console.log('app', params);
    });
}

这是计算器组件的构造函数：

constructor(private router: Router, private route: ActivatedRoute) {
    console.log('entered calc constructor');
    this.route.queryParamMap.subscribe(params => {
        console.log('calc', params);
    });
}

这是我在chrome中看到的日志：

为什么我的查询参数已被删除？

更新 我确实在应用程序组件中配置了导航，如下所示：

let navigationExtras: NavigationExtras = {
    queryParamsHandling: 'preserve',
    preserveFragment: true
};
this.router.navigate(['/calculator'], navigationExtras);

请注意，查询参数在到达此处之前已经消失了......

Answer 1

您遇到的问题是因为您正在打电话 this.router.navigate(['/calculator'], navigationExtras); 在你的app组件构造函数或OnInit中。请记住，queryParamMap是一个可观察的，因此当您调用navigate时，调用将在您的订阅者被调用之前发生。要解决您的问题，只需删除导航电话即可。如果您希望您的应用程序组件自动重定向到计算器，最简单的安全方法是只更改您的路径包括：

routes: Routes = [ {path: '', redirectTo: 'calculator', pathMatch: 'full'}, ... ]

有一个plunker应该说明这一点。为了在plunker工作中获取路由，我使用了HashLocation策略，因此请确保在播放时使用/#/...。

Answer 2

如果要检索查询参数，则使用queryParam / queryParamMap完成..

this.route.queryParamMap.subscribe(params => {
   console.log(params);
});

您可能需要保留查询参数，或按照此处所述合并它们。

https://angular.io/api/router/NavigationExtras

V4

preserveQueryParams: true

V5

queryParamsHandling: 'preserve'

Answer 3

您需要将查询参数分配给queryParams对象。

尝试：

this.router.navigate(['/calculator'], {queryParams: {a: 1}});

或将此添加到您的导航附加内容中：

let navigationExtras: NavigationExtras = {
    queryParamsHandling: 'preserve',
    preserveFragment: true,
    queryParams: {a:1}
};

Answer 4

这应该有效。

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
    ) { }

resetUrlQueryParams(){
  this.router.navigate([], 
      {
        relativeTo: this.activatedRoute,
        queryParams: {}
      });
}