刷新页面时URL的查询参数发生变化

Question

product.component.ts

   <div class="list-group">
    <a class="list-group-item" 
    [ngClass]="{'active' : isSelected}"
    routerLink="/"
    (click)="getAllProducts()">
    All Categories <span *ngIf="products$|async" class="badge badge-light">{{(products$ | async).length}}</span>
    </a>
    <a class="list-group-item" 
    *ngFor="let c of categories$ | async" 
    routerLinkActive="active" 
    routerLink="/" [queryParams]="{category: c.$key}"
    >
    {{c.name}}</a>
  </div>

product.component.html

export class ProductsComponent implements OnInit {

  filteredProducts = [];
  products$: FirebaseListObservable<any[]>;
  categories$: FirebaseListObservable<any[]>;
  isSelected: boolean;

  constructor(
    private _route: ActivatedRoute,
    private _cat_ser: CategoryService,
    private _pdt_ser: ProductService) { }

  ngOnInit() {
    this.isSelected = true; // by default All Categories get selected.
    this.categories$ = this._cat_ser.getCategories();
    this.products$ = this._pdt_ser.getProducts();
    this._route.queryParamMap.subscribe(params => {
      let category = params.get('category');
      (category) ? this.filter(category) : this.products$;
    })
  }

  getAllProducts() {
    this.isSelected = true;
    this.filteredProducts = [];
    return this.products$;
  }

  filter(category) {
      this.filteredProducts = [];
      this.isSelected = false;
      this.products$
      .subscribe(product => {
          product.filter((el) => {
          if(el.category.toLowerCase() == category.toLowerCase() || category.toLowerCase().includes(el.category)) {
            this.filteredProducts.push(el);
          }
        })
        return this.filteredProducts;
      })
  }

}

描述

单击列表项时，查询参数值是类别的键，而当我刷新页面时，它的参数将转换为类别的名称。因此我的列表项未被选中。 虽然重要的注意事项是“调味料”，但网址不会改变，因此保留了我想要刷新页面时所需的选择。

附件

DB

On clicking the list. Look at url. It's param is the key of DB.

On refreshing the page. It's param converts to name which is in DB