Параметр Angular2, инициализирующийся два раза во время маршрутизации

Question

Позвольте мне сначала ознакомится с моим кодом, а затем с вопросом, с которым я столкнулся. Ниже приведен код моего основного маршрута app.routes.ts:

export const routes: RouterConfig = [ 
    ...LoginRoutes, 
    ...DashboardRoutes, 
    {path:'dashboard', component: DashboardComponent, canActivate:[AuthGuard]} 
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes), [AuthGuard,AuthService, CanDeactivateGuard] 
]; 

DashboardRoutes выглядит следующим образом:

export const DashboardRoutes = [ 
{ 
    path:'dashboard', 
    component: DashboardComponent, 
    children:[ 
     {path:'New', component:NewData, canActivate:[AuthGuard], canDeactivate:[CanDeactivateGuard]}, 
     {path:'SavedData', component:SavedData, canActivate:[AuthGuard]}, 
     {path:'NewIncentive', component:NewIncentive, canActivate:[AuthGuard]} 
    ], 
    canActivate:[AuthGuard] 
} 
]; 

Теперь, когда я перехожу на страницу приборной панели, моя панель компонент инициализирует, который абсолютно нормально. Но если я перемещаюсь по любому компоненту дочернего маршрута на панели управления, компонент панели инструментов снова инициализируется; только однажды. Моя вторая проблема заключается в том, что когда я уже объявляю Маршрут для Компонент Дехбаорд в DashboardRoutes, то почему мне нужно объявить его снова в app.routes.ts? Если я удалю его объявление с app.routes.ts, он не работает. Любая помощь приветствуется.

Answer 1

Ваш компонент панели инструментов загружается дважды, потому что вы заявили два раза в своем приложении, один раз в app.routes и, во-вторых, в маршрутах на панели мониторинга ... просто объявите его только в dashboardroutes и укажите его ссылку в app.routes как. .

export const routes: RouterConfig = [ ...LoginRoutes, ...DashboardRoutes];

export const APP_ROUTER_PROVIDERS = [ provideRouter(routes), AuthGuard,AuthService, CanDeactivateGuard ]

это будет решать ваши вопросы как ..

если еще U Got любой запрос, дайте нам знать :)

Answer 2

Итак, наконец, я получил ответ после того, как делают некоторые R & D.

Каждый из ваших был прав, кто попросил меня удалить

{path:'dashboard', component: DashboardComponent, canActivate:[AuthGuard]} 

, но если я удалял эту линию я получаю сообщение об ошибке: Ошибка: Не удается соответствовать любым маршрутам: «приборной панели».

Это потому, что когда маршрут идет до http://localhost:3000/dashboard, он ищет дополнительную строку перенаправления, потому что мы объявили детей дочери. Когда маршрут не находит ни одной строки для дальнейшей перенаправления и ничего не обнаруживает для пустого пути, она бросает ошибку. Чтобы решить эту проблему, мне нужно сделать еще одну записи маршрута для пустого пути в DashboardRoutes, и после изменений, он выглядит следующим образом:

export const DashboardRoutes = [ 
{ 
    path:'dashboard', 
    component: DashboardComponent, 
    children:[ 
     {path:''}, 
     {path:'New', component:NewData, canActivate:[AuthGuard], canDeactivate:[CanDeactivateGuard]}, 
     {path:'SavedData', component:SavedData, canActivate:[AuthGuard]}, 
     {path:'NewIncentive', component:NewIncentive, canActivate:[AuthGuard]} 
    ], 
    canActivate:[AuthGuard] 
} 
]; 

У меня есть идея разрешить это от https://plnkr.co/edit/QlMe6pMINxJGTdA3xm0B?p=preview

Так идеи Решение: если есть какой-то компонент с каким-либо дочерним компонентом маршрутизации, запись в дочернем массиве также должна быть сделана для пустого пути.

Я ценю вашу помощь. Не стесняйтесь задавать любые вопросы.