带模块的角度路由 - 不显示路由的内容

Question

我已经为这个烦人的问题苦苦挣扎了好几天了，根本想不通。希望有人能接受我的错误，因为我确信它是小事。

我的一个模块中的路线内容没有显示，并且表现得很奇怪。当路线为/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 { }

所以基本上，应用程序会先转到仪表板布局，然后再转到客户。如前所述，空白路径 path: '' 正在工作并正确显示仪表板，但是当更改为状态时，它仍保留在仪表板上，即使 url 更改为 /dasboard/status

我希望这是足够的信息来提供帮助。如果您需要更多，请告知。

编辑

Here's a simple StackBlitz example 我正在尝试做的事情。

Answer 1

终于明白了。所以看来我的“命名”路由器插座导致了这些问题。所以我最终不得不有一个路由器插座并在dashboard-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]
})

它现在按预期工作