这是因为浏览器在重新加载页面时，会清除掉URL中的查询参数。要解决这个问题，可以使用Angular的内置服务“ActivatedRoute”和“Router”来获取和持久化查询参数。

首先，在需要获取查询参数的组件中，注入“ActivatedRoute”和“Router”服务：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {

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

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

}

然后，在需要持久化查询参数的地方（如点击某个按钮后进行页面跳转），使用“Router”服务的“navigate”方法，并传入“queryParamsHandling”选项：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-another-component',
  templateUrl: './another-component.component.html',
  styleUrls: ['./another-component.component.css']
})
export class AnotherComponentComponent implements OnInit {

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
  }

  goToMyComponent() {
    this.router.navigate(['/my-component'], { queryParams: { param1: 'value1' }, queryParamsHandling: 'merge' });
  }

}

在这个示例中，“queryParamsHandling”选项设置为“merge”，意味着将新的查询参数与现有的查询参数进行合并。也可以将它设置为“preserve”，表示保留现有的查询参数并忽略新的查询参数。

通过这种方法，将可以持续获取和使用查询参数，而不用担心浏览器重新加载页面时会将它们清除掉。