Порядок создания ActivatedSnapshot - PullRequest
Новая
       6

Порядок создания ActivatedSnapshot

0 голосов
/ 28 августа 2018

В качестве примера рассмотрим следующий модуль маршрутизации: 

const routes: Routes = [
  {
    path: 'first-admin',
    loadChildren: 'app/domain/first/first-admin/first-admin.module#FirstAdminModule'
    data: {module: 'first'}
  },
  {
    path: 'second-admin',
    loadChildren: 'app/domain/second/second-admin/second-admin.module#SecondAdminModule'
    data: {module: 'second'}
  }
}

Пользователь запрашивает / first-admin / ** В моем компоненте приложения, где ** - один из дочерних маршрутов.

В компоненте приложения я хочу получить данные, связанные с ActivatedRoute, но, похоже, не могу понять это, возможно, что-то упустило. Я замечаю, что когда я выгружаю снимок в консоль, сначала у него 0 дочерних элементов, а затем 1 дочерний, я думаю, что после загрузки дочерних элементов.

Компонент приложения содержит маршрутизатор-выход. Насколько я понимаю, когда компонент приложения загружает ActivatedRoute и снимок совпадает с первым? Затем, когда он загружает маршрутизируемый дочерний компонент в дочернем маршруте, он создает новый снимок, который будет дочерним по отношению к первому, а текущий ActivatedSnapshot будет отражать текущее состояние.

Вопрос - в своем компоненте приложения я пытался подписаться на данные, наблюдаемые в ActivatedRoute, но в подписке я получаю только нулевой объект данных. В моем компоненте приложения, как я могу получить «первое» имя модуля, которое является частью данных? Кажется, эти данные прикреплены к снимку, созданному дочерним маршрутом.

Добавлены эти три строки в ngOnInit в моем компоненте приложения: 

console.log('looking at the activatedroute snapshot', 
     this.activatedRoute.snapshot);

console.log('looking at created copy of activated route', 
    {...this.activatedRoute});

console.log('looking at the activated route', this.activatedRoute);

Изображение выпуска здесь:

Router state

1 Ответ

0 голосов
/ 28 августа 2018

Любой объект, который вы определяете в атрибуте data определения маршрута, является статическим и доступен только из моментального снимка. Статическая природа data означает, что наблюдаемая / подписка не нужна, поскольку data не изменится.

Вы получаете доступ к данным службы ActivatedRoute, которую предоставляет Angular.

Пример доступа к данным маршрута приведен ниже: 

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

@Component({
    selector: 'app-component',
    templateUrl: './component.html'
})
export class Component implements OnInit {
    module = '';

    constructor(
        private route: ActivatedRoute
    ) { }

    ngOnInit() {
        this.module = this.route.snapshot.data['module'];

        console.log('snap');
        console.log(this.route.snapshot);
        console.log(this.route.snapshot.data['module']);
    }
}

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

enter image description here

...