Angular - полностью разделяет маршруты родительского и дочернего модулей

Question

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

{
        path: '',
        component: MyLayoutComponent,
        children: [
            { path: 'child', loadChildren: './child/child.module#ChildModule' }
        ]
}

Таким образом, для каждого нового модуля этот файл маршрутов получит обновление.Есть ли способ, которым я все еще мог бы использовать дочерний модуль, не регистрируя его в массиве 'children' родительского модуля?Так что разработка функционального модуля не окажет никакого влияния на родительский модуль.

Answer 1

Необходимо создать файл модуля для дочернего компонента.

Например: у вас есть два компонента

1. Компонент учетной записи
2. Панель инструментовКомпонент

Для компонента учетной записи: необходимо создать один файл account.module для установки маршрутов для компонента учетной записи следующим образом.

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'account',
                component: AccountComponent
            }
        ]
    }
];

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forChild(routes)
    ],
    declarations: [AccountComponent]
})

Для компонента Dashboard: вам нужно создать один файл dashboard.module для установки маршрутов для компонента Dashboard следующим образом.

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'dashboard',
                component: DashboardComponent,
            }
        ]
    }
];

@NgModule({
    imports: [
        CommonModule,
        TranslateModule,
        RouterModule.forChild(routes)
    ],
    declarations: [DashboardComponent]
})

В файле основных маршрутов или в файле модулей APP у вас естьимпортировать модули.

const appRoutes: Routes = [
    {path: 'dashboard', loadChildren: './modules/dashboard/dashboard.module#DashboardModule'},
    {path: 'account', loadChildren: './modules/account/account.module#AccountModule'}
];


@NgModule({
    imports: [
        CommonModule,
        DashboardModule,
        AccountModule,
        RouterModule.forRoot(appRoutes)
    ],
    declarations: [],
    providers: [

    ]
})