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

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

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

Благодарю вас!


person RajnishCoder    schedule 05.09.2017    source источник


Ответы (3)


Поскольку 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);
    });
person Max Koretskyi    schedule 05.09.2017
comment
Вы уверены насчет средней части? Если вы переходите к тому же компоненту с другим параметром, снимок не должен обновляться..... - person Royi Namir; 26.03.2018
comment
@RoyiNamir, у тебя есть демо, чтобы показать это? Если это так, я обновлю свой ответ. Спасибо - person Max Koretskyi; 27.03.2018
comment
Вот демо . Использование моментального снимка - не показывает правильный идентификатор при нажатии. Таким образом, ваше утверждение здесь неверно - person Royi Namir; 03.04.2018
comment
@RoyiNamir, ссылка не работает. Не могли бы вы исправить это? - person Max Koretskyi; 04.04.2018
comment
@RoyiNamir, он обновляет снимок, вот демо: stackblitz.com/edit/. id, который приходит в качестве параметра обратного вызова, такой же, как и в моментальном снимке. - person Max Koretskyi; 04.04.2018
comment
Вы проходите через подписку. уверен, что это было бы. но моментальный снимок - его главное правило - получить ценность без необходимости подписки. если компонент уничтожен, а затем вы переходите к новому компоненту, вы сможете увидеть изменение снимка. - person Royi Namir; 04.04.2018
comment
@RoyiNamir, дело не в подписке, я обновил пример. Нет там подписки - person Max Koretskyi; 04.04.2018
comment
Я думаю, я имел в виду, что ctor больше не будет вызываться (ни ngOninit) - поэтому код, который читает снимок, не будет вызываться. Но, как вы показали, это не означает, что параметр не будет обновляться. - person Royi Namir; 05.04.2018
comment
ActivatedRoute.routeConfig не является Observable, так что это то же самое, что и ActivatedRouteSnapshot.routeConfig? - person Luke; 23.05.2018
comment
@ Люк, ты можешь легко проверить это сам - person Max Koretskyi; 24.05.2018
comment
Я проверил, они одинаковые. - person Luke; 24.05.2018
comment
@ Люк, так какой у тебя вопрос? - person Max Koretskyi; 24.05.2018
comment
Какой смысл иметь ActivatedRoute.routeConfig и ActivatedRouteSnapshot.routeConfig, если они одинаковы, когда использовать тот или другой и т. д.? - person Luke; 24.05.2018
comment
@ Люк, потому что ActivatedRoute и ActivatedRouteSnapshot имеют разные цели, и вы можете использовать только одну из них. Было бы неудобно, если бы вам приходилось использовать другой только для того, чтобы получить routeConfig - person Max Koretskyi; 24.05.2018
comment
Я думаю, что этот ответ немного вводит в заблуждение / сбивает с толку... поэтому я сделал свой собственный. Ваш пример доказательства в конце, я думаю, только делает его более запутанным. - person Don Cheadle; 10.11.2018

Одним из ключевых отличий, не отмеченным другими ответами здесь, является тот факт, что ActivatedRoute можно внедрить в компонент, а ActivatedRouteSnapshot нельзя.

Как упоминалось в этом ответе, вы получаете доступ к ActivatedRouteSnapshot в компоненте, вводя ActivatedRoute, а затем получая доступ к его свойству snapshot, например:

constructor(route: ActivatedRoute) { 
  let activatedRouteSnapshot = route.snapshot;
}

С другой стороны, попытка внедрить ActivatedRouteSnapshot непосредственно в компонент приведет к такой ошибке:

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: StaticInjectorError (AppModule) [ВашКомпонент -> ActivatedRouteSnapshot]: StaticInjectorError (Платформа: ядро) [ВашКомпонент -> ActivatedRouteSnapshot]: NullInjectorError: Нет провайдера для ActivatedRouteSnapshot!

См. также документацию для ActivatedRoute и ActivatedRouteSnapshot

person peregrination    schedule 06.12.2019

person    schedule
comment
Будет ли подписка на наблюдаемый объект считаться реальной работой, которую следует выполнять в ngOnInit, а не в конструкторе? - person Charles Wood; 07.01.2019