命名的出口组件加载到根组件中

Question

我正在尝试使用辅助路由实现sidenav,但没有成功.

这是我的路由器的简化示例:

{
        path: 'admin',
        component: MainLayoutComponent,
        children: [
            {
                path: '',
                component: ReportsPageComponent
            },
            {
                path: ':userID',
                component: ReportsUserPageComponent,
                resolve: {userID: UserIDResolver},
                children: [
                    {
                        path: 'day-detail/:day',
                        outlet: 'sidenav',
                        component: DayDetailComponent,
                        resolve: {dayRange: DayRangeResolver},
                    },
                ]
            },
        ]
    }

main-layout.component.html:

<div class="content">
    <router-outlet></router-outlet>
</div>
<router-outlet name="sidenav"></router-outlet>

然后在ReportsUserPageComponent中导航

this.router.navigate(['./', { outlets: { sidenav: ['day-detail', new Date().toJSON()] } }], { relativeTo: this.route });

这创造了这样的东西

admin/9/(sidenav:day-detail/2018-06-22T13:28:11.737Z)

问题是它不想加载DayDetailComponent.我需要这个作为ReportsUserPageComponent的子项,因为我不想要这样的东西,admin/(9//sidenav:day-detail/2018-06-20T22:00:00.000Z)因为我回去后,那些括号保留在那里(admin/(9))没有明显的原因.