Угловая 7 одинаковая маршрутизация с разными параметрами

Question

Я хочу перезагрузить компонент, когда параметры маршрутизации изменились.У меня есть список на боковой панели, и я также хочу выделить список, выбранный на боковой панели.

Sidebar.html

  1)List1
  2)List 2
  3)List 3

При нажатии на 1-й вариант (Список1) в первый раз. Это маршрутизация к компоненту (testapi), упомянутому в компоненте боковой панели (this._router.navigate (['/ example / testapi', value])).Начиная со второго щелчка, он не направляется (компонент testapi).GetSomeValue (значение: String) также вызывается во второй раз, но не маршрутизируется (компонент testapi).

с помощью добавления ниже в Sidebar.ts

  ngOnInit() {
   this._router.routeReuseStrategy.shouldReuseRoute = function() {
     return false;
    };
   }

IЯ могу маршрутизировать с другими параметрами, но проблема в том, что списки обновляются.Поэтому каждый раз, когда я щелкаю значение из списков, значение списка обновляется.Я хочу выделить значение списка, по которому я щелкнул, и значения списка должны быть постоянными (после нажатия здесь не должно быть обновления)

Sidebar.ts Здесь Как я также могу выделить выбранный маршрут цветом

     getSomeValue(value:String){

      this._router.navigate(['/example/testapi',value]);
     }

example-routings.ts

      {
      path: 'testapi/:id',

   }

https://localhost:4200/example/testapi/123

https://localhost:4200/example/testapi/456 // Это не маршрутизация и перезагрузка компонента

Answer 1

Попробуйте так:

constructor(private _router: Router)

getSomeValue(value:String){

  this._router.navigate(
        [],
        {
          relativeTo: this._route,
          queryParams: { value: value },
          queryParamsHandling: 'merge'
        });
}

Если вам нужно извлечь значение из параметров, сделайте следующее:

  ngOnInit() {
    this.getStates();
    this._route.queryParams.subscribe(
      (params: Params) => {
        if (params.hasOwnProperty('value')) {
           console.log(params['value'])
        }
      }
    );
  }

Answer 2

Вы можете использовать Router, подписаться на наблюдаемый внутри конструктор.

constructor(private router: Router) {
   this.router.events.subscribe((data) => {
     //code goes here
   });
 }