Angular 2: родственные дочерние маршруты, использующие один и тот же преобразователь

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

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
export const routes = [{
        path: '',
        component: parentComponent,
        canActivate: [AuthGuard],
        resolve: {
            someData: someDataResolver
        },
        children: [
            { path: '', redirectTo: '0', pathMatch: 'full' },
            { path: '0', 
                component: someComponent1,
                resolve: {
                    someData1: someData1Resolver,
                    someData2: someData2Resolver,
                }
            },
            { path: '2', 
                component: someComponent2,
                resolve: {
                    someData2: someData2Resolver
                }
            }
            ... a bunch more children routes/components with resolvers

        ]
    }]

Прямо сейчас я повторяю вызовы распознавателей для каждого дочернего маршрута, что я считаю не оптимальным. Кто-нибудь знает, есть ли лучший способ поделиться данными из общего родственного дочернего преобразователя? Я подумал о том, чтобы установить данные из дублирующего распознавателя в общую службу, в которой другой дочерний родственный маршрут будет получать доступ к данным из службы (вместо того, чтобы делать еще один вызов API в распознавателе). Есть ли другие более оптимальные решения?


angular routes resolver
person PBandJen    schedule 29.10.2016    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вы можете добавить дополнительный уровень с бескомпонентным родительским маршрутом и поднять преобразователь на этот уровень:

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
export const routes = [{
        path: '',
        component: parentComponent,
        canActivate: [AuthGuard],
        resolve: {
            someData: someDataResolver
        },
        children: [
            { path: '', 
                resolve: {
                    someData2: someData2Resolver
                },

            children: [
                { path: '', redirectTo: '0', pathMatch: 'full' },
                { path: '0', 
                    component: someComponent1,
                    resolve: {
                        someData1: someData1Resolver,
                    }
                },
                { path: '2', 
                    component: someComponent2,
                }
                ... a bunch more children routes/components with resolvers
            ]
        ]
    }]
person Günter Zöchbauer    schedule 29.10.2016
comment
Как дочерний компонент получит доступ к разрешенным данным из родительского компонента? - person Gambo; 06.01.2017
comment
Когда дочерний маршрут внедряет route:ActivatedRoute, он должен иметь доступ к нему с помощью this.route.parent.data или this.route.parent.snapshot.data. - person Günter Zöchbauer; 06.01.2017
comment
Это работает, спасибо! Каково ваше предложение перезагрузить данные, когда, например. пользователь, редактировавший объект, возвращается к подробному представлению? путь: ':id', компонент: CustomerDetailComponent, преобразователь: {клиент: ...}, дочерние элементы: [ {путь: 'редактировать', компонент: CustomerEditComponent....} ] Данные не перезагружаются, так как пользователи остаются внутри родительский маршрут. - person Gambo; 06.01.2017
comment
Извините, но мне нужно больше подробностей. Перезагрузить откуда? - person Günter Zöchbauer; 06.01.2017
comment
Я не вижу легкого пути. Вы можете поделиться сервисом в родительском компоненте, внедрить его в дочерний компонент и использовать его для передачи данных. - person Günter Zöchbauer; 06.01.2017