查询参数和 url 未正确更新

Question

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,

  ) {}

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {  //subscribe to param change
      console.log('params', params)

  }

  updateQueryParams(queryParam:any): void {

    this.router.navigate([],
      {
        queryParams: queryParams,
        relativeTo: this.activatedRoute,
        queryParamsHandling: 'merge',
      })
  }

如果最初我的 url 只是 http://localhost:8080/emp-search 我发送这个对象来查询参数，

{name:'test', email: 'test'}

路由正确更新为 http://localhost:8080/emp-search?name=test&email=test 并且参数更改在我的 ngOnInit()

中被捕获

之后，如果我再次调用我的 updateQueryParams() 方法并将此对象作为 queryParams {name:'test'} 发送。 url 不更新并保持 http://localhost:8080/emp-search?name=test&email=test 并且 ngOnInit()

中未捕获任何参数更改

但是，如果我改为发送此对象

{name:'test', email: 'test', id: '1'}

url 正确更新为 http://localhost:8080/search?name=test&email=test$id=1

Answer 1

从导航选项中删除“queryParamsHandling：'merge'”在您的“updateQueryParams”函数中它应该可以工作

查询参数和 url 未正确更新

Query parameters and url are not getting updated correctly

angular

angular-router

angular9