В чем разница между ActivatedRoute и ActivatedRouteSnapshot в Angular4

В чем разница между ActivatedRouteSnapshot и ActivatedRoute в Angular 4? Я понимаю, что ActivatedRouteSnapshot является дочерним элементом ActivatedRoute, что означает, что ActivatedRoute содержит ActivatedRouteSnapshot.

Кстати, я попробовал запустить поиск в Google для ответа на этот вопрос, но я не нашел ни одного из результатов поиска, чтобы быть понятным.

Спасибо!

ОТВЕТЫ

Ответ 1

Так как ActivatedRoute можно повторно использовать, ActivatedRouteSnapshot - это неизменный объект, представляющий конкретную версию ActivatedRoute. Он предоставляет все те же свойства, что и ActivatedRoute как простые значения, а ActivatedRoute предоставляет их как наблюдаемые.

Вот комментарий в реализации:

export class ActivatedRoute {
  /** The current snapshot of this route */
  snapshot: ActivatedRouteSnapshot;

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

path: /segment1/:id,
component: AComponent

Теперь вы переходите к:

/segment1/1

У вас будет парам в activatedRoute.snapshot.params.id как 1.

Теперь вы переходите к:

/segment1/2

У вас будет параметр в activatedRoute.snapshot.params.id как 2.

Вы можете увидеть это, выполнив следующее:

export class AComponent {
  constructor(r: ActivatedRoute) {    
    r.url.subscribe((u) => {
      console.log(r.snapshot.params.id);
    });

Ответ 2

Есть 2 способа получить параметр из маршрута.

1. Снимок (route.snapshot.paramMap.get). Прочитайте это во время init.

Используйте снимок, если вам требуется только начальное значение параметра один раз во время инициализации компонента, и не ожидайте, что URL изменится, пока пользователь все еще находится в этом же компоненте.

  • То есть если на маршруте продукта /2 и единственный путь к продукту /3, это вернуться к экрану поиска продукта, а затем щелкнуть подробные сведения о продукте (оставить компонент сведений, а затем снова открыть его с новым маршрутом). пары)

2. Наблюдаемый (route.paramMap.subscribe). Подпишитесь на него во время init.

Используйте Observable, если возможно изменение маршрута, пока пользователь все еще находится в том же компоненте, и, следовательно, инициализация компонента больше не будет вызываться, но Observable будет вызывать вашу подписанную логику при изменении URL.

  • То есть Если на маршруте product/2 у вас есть кнопка "Далее", чтобы перейти к следующей записи id продукта /3, значит, пользователь не покинул/повторно открыл компонент, но URL получил новый параметр.


Вообще говоря, подписка является самым безопасным маршрутом, если вы не уверены.