标头/内容延迟在同一路由上加载，但命名路由器出口不起作用

Question

我遇到一个名为<router-outlet></router-outlet>的问题，因为只有一个有效，我只有三个（一个根/两个孩子）。展位子出口在同一文件级别。这是我的项目结构：

我正在app-routing.module.ts内装载SoftwareComponent。

app-routing.module.ts

...
const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        component: SoftwareComponent
    }
...

software.component.html

<div class="header">
    <app-header></app-header>
</div>

<div class="content">
    <div class="data">
        <app-data></app-data>
    </div>

    <div class="sidemenu">
        <div class="personfilter">
            <app-last-operations></app-last-operations>
        </div>
        <div class="menuItems">
            <app-menu></app-menu>
        </div>
    </div>
</div>

<div class="footer">
    <app-footer></app-footer>
</div>

现在的问题似乎是我的<app-header>和我的<app-data>包含一个。 <router-outlet name="header">内的<app-header>和<router-outlet name="content">内的<app-data>。所以我无法上班。尽管我已经在加载的模块中添加了正确的outlet，但只有一个有效。

例如：这是我的/personal路线：

app-routing.module.ts

{
    path: 'personal',
    component: SoftwareComponent,
    children: [
        {
            path: '',
            loadChildren: './components/software/data/personal/personal.module#PersonalModule' 
        },
        {
            path: '',
            loadChildren: './components/software/header/header-personal/header-personal.module#HeaderPersonalModule' 
        }
    ]
}

如果我删除了第一个loadChildren数据，则标题将正确加载并显示在我的HeaderComponent内部。如果我删除第二个loadChildren（即标头），则内容/数据将正确加载到DataComponent中。

出于完整性考虑：

personal-routing.module.ts

...
const routes: Routes = [
    {
        path: '',
        outlet: 'content',
        component: PersonalComponent
    }
];
...

header-personal-routing.module.ts

...
const routes: Routes = [
    {
        path: '',
        outlet: 'header',
        component: HeaderPersonalComponent
    }
];
...

app.component.html

<router-outlet></router-outlet>

也许有人可以解释如何正确地懒惰加载两个模块。