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

вот моя структура приложения 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 {
}

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

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, без боковой панели или верхней панели.

Можете ли вы сказать мне, что случилось с моим кодом? В консоли нет ошибок.

Ответ 1

Вы можете попробовать это, используя loadchildren, где модули 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

Ответ 2

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

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, но вы можете получить информацию о текущих маршрутах.

Ответ 3

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

Ответ 4

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

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

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