Angular2 маршрутизатор: как правильно загружать детей модули с их собственными правилами маршрутизации

Question

вот моя Angular2 структура приложения:

Вот часть моего кода. Ниже приведено основное приложение module приложения Angular2, которое импортирует его правила маршрутизации и дочерний модуль (EdgeModule) и использует некоторые компоненты, относящиеся к некоторым страницам.

app.module.ts

@NgModule({ 
    declarations: [ 
     AppComponent, 
     PageNotFoundComponent, 
     LoginComponent 
    ], 
    imports: [ 
     ... 
     appRouting, 
     EdgeModule 
    ], 
    providers: [ 
     appRoutingProviders, 
     LoginService 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { 
} 

Вот правила маршрутизации для основного модуля. У него есть пути к странице входа и страница не найдена.

app.routing.ts

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

export const appRoutingProviders: any[] = []; 

export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true }); 

Вот EdgeModule, объявляющий компонент, который он использует и импортировать свои собственные правила маршрутизации и 2 дочерних модулей (FirstSectionModule и SecondSectionModule).

edge.module.ts

@NgModule({ 
    declarations: [ 
     EdgeComponent, 
     SidebarComponent, 
     TopbarComponent 
    ], 
    imports: [ 
     ... 
     edgeRouting, 
     FirstSectionModule, 
     SecondSectionModule 
    ], 
    providers: [ 
     AuthGuard 
    ] 
}) 

export class EdgeModule { 
} 

Вот правила маршрутизации для модуля, который загружает, как вы можете видеть, topbar и боковой панели компонентов.

edge.routing.ts

Paths['edgePaths'] = { 
    firstSection: 'firstSection', 
    secondSection: 'secondSection' 
}; 

const appRoutes: Routes = [ 
    { path: '', component: EdgeComponent, 
     canActivate: [AuthGuard], 
     children: [ 
      { path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' }, 
      { path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' }, 
      { path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' } 
     ] 
    } 
]; 

export const edgeRouting = RouterModule.forChild(appRoutes); 

Наконец, это один из модуля два ребенка, которые имеют свои компоненты и импортируют свои правила маршрутизации.

-первых section.module.ts

@NgModule({ 
    declarations: [ 
     FirstSectionComponent, 
     SomeComponent 
    ], 
    imports: [ 
     ... 
     firstSectionRouting 
    ], 
    providers: [ 
     AuthGuard, 
    ] 
}) 

export class FirstSectionModule { 
} 

Таковы правила маршрутизации для страниц (компонент) FirstSectionModule

-первых section.routing.ts

Paths['firstSectionPaths'] = { 
    someSubPage: 'some-sub-page', 
    someOtherSubPage: 'some-other-sub-page' 
}; 

const appRoutes: Routes = [ 
    { 
     path: '', 
     children: [ 
      { path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent}, 
      { path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent}, 
      { path: '', component: AnagraficheComponent } 
     ] 
    } 
]; 

export const firstSectionRouting = RouterModule.forChild(appRoutes); 

Почти то же самое происходит для second-section.module.ts и second-section.routing.ts файлов.

Когда я запускаю приложение, первое, что загружается, - это страница, связанная с FirstSectionComponent, без боковой панели или верхнего бара.

Не могли бы вы рассказать мне, что не так с моим кодом? В консоли нет ошибок.

Answer 1

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

app.component.ts:

constructor(private _router: Router) { 
} 

ngOnInit() { 
    ... 
    this._router.config[0].children = myService.getRoutes(); 
    this._router.resetConfig(this._router.config); 
    console.debug('Routes:', this._router.config); 
    ... 
} 

Это не OOTB решение , но вы можете получить информацию о текущих маршрутах.

Answer 2

Вы можете попробовать это с помощью загрузчиков, где модули homemodule, productmoudle, baout имеют свои собственные правила маршрута.

const routes: Routes = [ 

     { path: 'home', loadChildren: 'app/areas/home/home.module#homeModule' }, 
     { path: 'product', loadChildren: 'app/areas/product/product.module#ProductModule' }, 
{ path: 'drawing', loadChildren: 'app/areas/about/about.module#AboutModule' } 
    ]; 



    export const appRouting = RouterModule.forRoot(routes); 

и домашний маршрут правило будет как

export const RouteConfig: Routes = [ 
    { 
     path: '', 
     component: HomeComponent, 
     canActivate: [AuthGuard], 
     children: [ 
      { path: '', component: HomePage }, 
      { path: 'test/:id', component: Testinfo}, 
      { path: 'test2/:id', component: Testinfo1}, 
      { path: 'test3/:id', component: Testinfo2} 
     ] 
    } 
]; 

это также известно как отложенная загрузка модулей.

{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' } 

Там в несколько важных вещей, чтобы заметить здесь: Мы используем собственность loadChildren вместо компонента. Мы передаем строку вместо символа, чтобы не загружать модуль с нетерпением. Мы определяем не только путь к модулю, но и имя класса. Нет ничего особенного в LazyModule, кроме его собственной маршрутизации и компонента LazyComponent.

Оформить это замечательное учебное пособие, связанное с этим.

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

Answer 3

Это проблема инъекции зависимостей. Нам не нужно вводить FirstSectionModule & SecondSectionModule в edgeModule & о маршруте, который мы можем использовать внутри FirstSectionModule & SecondSectionModule. Так что просто удалить его из edgeModule будет работать.

Answer 4

В вашем приложении app.routing.ts есть только 2 маршрута и нет маршрута для перехода к главному разделу (как на диаграмме). Должна быть запись маршрута с свойством loadchildren, чтобы он загружал модуль для основного раздела.

routes: Routes = [... 
{ 
path: 'main', loadChildren: '<file path>/<Edge module file name>#EdgeModule' 
} 
...]; 

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