组件在进入子路线时未初始化

我按照this有用的答案来设置不同布局的路线，但是当我尝试将子项实现到其中一个页面时，我遇到了问题 .

当我找到PagesConfig 1 .link的任何子项时，侧栏和顶栏组件都没有初始化，尽管它们匹配所有路径（路径：''） .

我试图在PagesConfig 1 .link的子数组中创建它们的副本，但随后它们重新初始化，因此失去状态 .

这是代码：

pages.ts
export const PagesConfig = [
    {
        name: 'Dashboard',
        link: 'dashboard',
        iconClass: 'pe-7s-graph',
    },
    {
        name: 'Stages',
        iconClass: 'pe-7s-albums',
        link: 'stages',
        children: [
            {
                name: 'Stage 1 - Review',
                link: '1'
            },
            {
                name: 'Stage 2 - Signatures',
                link: '2'
            },
            {
                name: 'Stage 3 - ASV',
                link: '3'
            },
            {
                name: 'Passed',
                link: 'passed'
            },
            {
                name: 'Fallen',
                link: 'fallen'
            },
            {
                name: 'Feedback',
                link: 'feedback'
            },
            {
                name: 'Archived',
                link: 'archived'
            },
            {
                name: 'Closed',
                link: 'closed'
            },
        ]
    },
    {
        name: 'Users',
        link: 'users',
        iconClass: 'pe-7s-users',
    },
    {
        name: 'Reports',
        link: 'reports',
        iconClass: 'pe-7s-display1',
    },
    {
        name: 'Debug',
        link: 'debug',
        iconClass: 'pe-7s-config',
    }
];

app.routing.ts

const appRoutes: Routes = [
    { path: '', canActivate: [LoginGuardService], children: [
        { path: '', redirectTo: '/' + PagesConfig[0].link, pathMatch: 'full' },

        { path: PagesConfig[0].link, component: DashboardComponent, data: {name: PagesConfig[0].name}, canActivate:[PermissionGuardService] },
        { path: PagesConfig[1].link, canActivate:[PermissionGuardService], children: [
            { path: '', redirectTo: '/' + PagesConfig[1].link + '/' + PagesConfig[1]['children'][0].link, pathMatch: 'full' },
            { path: PagesConfig[1]['children'][0].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][0].name } },
            { path: PagesConfig[1]['children'][1].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][1].name } },
            { path: PagesConfig[1]['children'][2].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][2].name } },
            { path: PagesConfig[1]['children'][3].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][3].name } },
            { path: PagesConfig[1]['children'][4].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][4].name } },
            { path: PagesConfig[1]['children'][5].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][5].name } },
            { path: PagesConfig[1]['children'][6].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][6].name } },
            { path: PagesConfig[1]['children'][7].link, component: StagesComponent, data: { name: PagesConfig[1]['children'][7].name } }
        ]},
        { path: PagesConfig[2].link, component: UsersComponent,   data: {name: PagesConfig[2].name}, canActivate:[PermissionGuardService] },
        { path: PagesConfig[3].link, component: ReportsComponent, data: {name: PagesConfig[3].name}, canActivate:[PermissionGuardService] },
        { path: PagesConfig[4].link, component: DebugComponent,   data: {name: PagesConfig[4].link}, canActivate:[PermissionGuardService] },

        { path: '',          component: SidebarComponent,   outlet: 'sidebar'},
        { path: '',          component: TopBarComponent,    outlet: 'topbar'},
    ]},
    { path: 'login', children: [
        { path: '', component: LoginComponent }
    ]}
];

有人知道如何在主要路线的孩子中坚持这些组件吗？谢谢！

UPDATE 我已经解决了这个问题，完全没有使用这个应用程序架构，而是使用ngSwitch指令根据路由器中收到的活动路由打开或关闭组件 .