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

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)），没有明显的原因。