Блог

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

Содержимое для моих маршрутов в одном из моих модулей не отображается и ведет себя странно. Когда маршрут /dashboard успешно отображается, компоненты панели мониторинга успешно отображаются, однако, когда я перехожу на другой маршрут, как /dashboard/status отображается то же содержимое, а компонент состояния не отображается. Если я изменю маршрут только /status тогда, отобразится содержимое компонента состояния, но при этом будут удалены все компоненты макета панели мониторинга, такие как боковая панель, панель навигации и т.д.

Ниже мой app-routing.module.ts

 import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { layoutRoutes } from './modules/landing-layout/landing-layout-routing.module';

import { AccountDetailResolve } from './services/account/account-detail.resolve.service';
import { LandingLayoutComponent } from './modules/landing-layout/landing-layout.component';
import { DashboardLayoutComponent } from './modules/dashboard-layout/dashboard-layout.component';

const routes: Routes = [
    {
        path: '',
        component: LandingLayoutComponent,
        children: layoutRoutes
    },
    {
        path: 'dashboard',
        component: DashboardLayoutComponent,
        loadChildren: () => import('./modules/dashboard-layout/dashboard-layout.module')
            .then(m => m.DashboardLayoutModule),
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [
        AccountDetailResolve
    ]
})
export class AppRoutingModule { }
 

Это мое dashboard-layout-routing.module.ts . Как показано ниже, существует два типа панелей мониторинга. Один для администраторов и один для клиентов. Каждый использует свою собственную розетку в dashboard-layout.component.html

 import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { adminRoutes } from '../admin/admin-routing.module';
import { AdminComponent } from '../admin/admin.component';
import { customerRoutes } from '../customer/customer-routing.module';
import { CustomerComponent } from '../customer/customer.component';

const routes: Routes = [
    {
        path: '',
        component: AdminComponent,
        outlet: 'admin',
        children: adminRoutes
    },
    {
        path: '',
        component: CustomerComponent,
        outlet: 'customer',
        children: customerRoutes
    }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardLayoutRoutingModule { }
 

И, наконец, это мой customer-routing.module.ts

 import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccountStatusComponent } from './components/account-status/account-status.component';
import { CustomerIndexComponent } from './components/index/customer-index/customer-index.component';

export const customerRoutes: Routes = [
    {
        path: '',
        component: CustomerIndexComponent,
    },
    {
        path: 'status',
        component: AccountStatusComponent, 
    },
];

@NgModule({
  imports: [RouterModule.forChild(customerRoutes)],
  exports: [RouterModule]
})
export class CustomerRoutingModule { }
 

Таким образом, по сути, приложение переходит к dashboard-layout, а затем к клиенту. Как упоминалось ранее, пустой путь path: '' работает и правильно отображает панель мониторинга, но при изменении статуса он остается на панели мониторинга, даже если URL меняется на /dasboard/status

Я надеюсь, что этой информации достаточно, чтобы помочь. Пожалуйста, сообщите, если вам нужно больше.

Редактировать

Вот простой пример StackBlitz того, что я пытаюсь сделать.

Наконец-то разобрался. Так что, похоже, мои «именованные» маршрутизаторы вызывали проблемы. В итоге мне пришлось иметь один маршрутизатор-выход и переключаться между модулями на панели инструментов-layout-routing.module.ts, как показано ниже:

Вместо того, чтобы в dashboard-layout.component.html

 <router-outlet *ngIf="systemAdmin" name="admin"></router-outlet>
<router-outlet *ngIf="!systemAdmin" name="customer"></router-outlet>
 

Я добавил это в dashboard-layout-routing.module.ts

 function routesFactory() {
    let isAdmin: boolean = true; //TODO:: Get from service
    return [
        {
            path: '',
            component: DashboardLayoutComponent,
            loadChildren: () => {
                return isAdmin ? 
                    import('../admin/admin.module').then(m => m.AdminModule) :
                    import('../customer/customer.module').then(m => m.CustomerModule);
        }
    }]
}
@NgModule({
    imports: [RouterModule.forChild([])],
    providers: [{
        provide: ROUTES,
        useFactory: routesFactory,
        multi: true,
        deps: []
    }],
    exports: [RouterModule]
})
 

Теперь он работает так, как ожидалось