Сохранение состояния страницы в текущий маршрут в качестве параметра

Я обновил ваш пример StackBlitz здесь.

Вот основные шаги:

1. Импортируйте Angular МаршрутизаторМодуль в свое приложение:

   @NgModule({
     imports: [
        RouterModule.forRoot([])
      ]
    })
    export class AppModule {}
   

2. Слушайте изменения параметров запроса маршрута из ActivatedRoute:

   ngOnInit() {
      // Remember to unsubscribe when this component is destroyed
      this.route.queryParams.subscribe(params => {
        const selectedFood = this.foods.find(f => f.value === params.food);
        if (selectedFood) {
          this.selectedFood = selectedFood;
        }
     });
   }
   

3. Обновите URL-адрес, когда пользователь изменит выбор из доступных вариантов, используя Router.navigate:

   foodSelectionChange(change: MatSelectChange) {
     const food: Food = change.value;
     this.router.navigate([], { 
       queryParams: { food: food.value }
     });
   }
   

Попробуйте использовать replaceState.

import {Location} from '@angular/common';

@Component({
  selector: 'example-component',
  templateUrl: 'example.component.html'
})
export class ExampleComponent
{
  constructor( private location: Location )
  {}

  setTheFood()
  {    
    this.location.replaceState('favouriteFood=selectedFood');
  }
}