Угловое обнаружение изменения маршрута только при навигации к другому компоненту

Question

Я пытаюсь что-то сделать при изменении маршрута (т. Е. Прокрутить вверх) только при переходе к другому компоненту в моем приложении, но не при остановке на одном и том же компоненте, а просто при изменении его вида по маршруту на тот же компонент с другимпараметры запроса

Например, если я нахожусь на /products?category=kitchen и перехожу на /products?category=bedroom, я не хочу, чтобы выполнялась операция (т.е. прокрутка вверх).

Этокод в моем app.component.ts:

this.router.events.pipe(
  filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
  // Would like to check here if user navigates to different component
  if (window) window.scrollTo(0, 0);
});

Кто-нибудь знает, как мне этого добиться?

Answer 1

Вы можете подписаться на ActivatedRoute paramMap, чтобы делать свои вещи:

this.activatedRoute.paramMap.subscribe(paramMap  =>  {
        this.router.navigate('your child route here');
    });

и убедитесь, что представление категории является дочерним маршрутом products.

Также вместо представления продуктов в HTML-шаблоне добавьте местозаполнитель маршрутизации, где будет размещено дочернее представление:

<router-outlet></router-outlet>

Подробнее о вложенной маршрутизации вы можете прочитать здесь:

Answer 2

РЕДАКТИРОВАТЬ:

Поскольку я не знаю ваш сценарий использования, я могу только предположить, что вы пытаетесь достичь следующего:

В вашем приложении, каким-то образом, параметр запроса "категория""может быть изменено, например, нажатием на категорию.Вместо того чтобы делать

router.navigate(['/products?category=' + newlySelectedCategory]);

и, вероятно, реагировать на этот параметр запроса с помощью

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

@Component({...})
export class MyComponent implements OnInit {

  category: string;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        this.category = params['category'];
    });
  }

}

, вы можете сделать:

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

@Component({...})
export class MyComponent implements OnInit {

  category: string;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        this.category = params['category'];
    });
  }

  // This will probably be called from your html code
  selectCategory(category: string) {
     this.category = category;
     this.location.replaceState(`products?category=${category}`);
  }
}

ThisКстати, маршрутизации не будет.

---

Один из возможных способов - не маршрутизировать, а изменить текущий URL-адрес с помощью this.location.replaceState (при условии, что вы ввели private location: Location в своем конструкторе) и запустить вручнуютот же процесс, который происходит, когда вы считываете параметр запроса URL.