В чем разница между 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 получил новый параметр.
Вообще говоря, подписка является самым безопасным маршрутом, если вы не уверены.