Почему данные выбираются с помощью ActivatedRoute.snapshot.data ['']?

Question

Я только начал изучать Angular и увидел этот фрагмент кода:

export class ProductListComponent implements OnInit {

  private Products: Product[];


  constructor(private _activatedRoute: ActivatedRoute) 
  {

  }

  ngOnInit() {
    this.Products = this._activatedRoute.snapshot.data['Products'];
  }

}

И, очевидно, соменон получает данные, используя этот код:

this._activatedRoute.snapshot.data['Products'];

Почему службы не используются для получения данных? И мне интересно, откуда эти данные приходят тогда? : O

И, кстати, разве не должно быть сервисов, используемых для получения данных из базы данных? а не ActivatedRoute?

Спасибо, ребята Приветствия

Answer 1

this._activatedRoute.snapshot.data['Products']; этот код не получает данные из базы данных, и вас это смутило.

Это данные, которые вы отправили во время навигации по маршрутам

Во время навигации после применения перенаправлений маршрутизатор создает RouterStateSnapshot

Так что же такое RouteStateSnapshot:

Официальное определение:

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

Немного больше объяснений:

RouteStateSnapshot - это неизменяемая структура данных, представляющая состояние роутера в определенный момент времени. В любое время компонент добавлен или удален или параметр обновлен, новый снимок создан.

Вот фактический код этого snapshot

interface RouterStateSnapshot {
  root: ActivatedRouteSnapshot;
}

interface ActivatedRouteSnapshot {
  url: UrlSegment[];
  params: {[name:string]:string};
  data: {[name:string]:any};

  queryParams: {[name:string]:string};
  fragment: string;

  root: ActivatedRouteSnapshot;
  parent: ActivatedRouteSnapshot;
  firstchild: ActivatedRouteSnapshot;
  children: ActivatedRouteSnapshot[];
}

Содержит данные URL, component, data, params и т. Д.

Давайте рассмотрим пример и конфигурацию маршрута:

[
  {
    path: ':folder',
    children: [
      {
        path: '',
        component: ConversationsCmp
      },
      {
        path: ':id',
        component: ConversationCmp,
        children: [
          {
            path: 'messages',
            component: MessagesCmp
          },
          {
            path: 'messages/:id',
            component: MessageCmp,
            resolve: {
              message: MessageResolver
            }
          }
        ]
      }
    ]
  }
]

Когда мы перейдем к /inbox/10/messages/11, маршрутизатор посмотрит на URL и создаст следующее RouterStateSnapshot:

component: MessageCmp
url: [‘messages’, ‘11’]
params: {id: ’10‘}
data: {}

Итак, product data, о котором вы думаете, может исходить от этого route data

Это справочная документация

Вот документация