带有命名出口的子节点的角延迟加载

Question

首先，我要提到的是以下所有路线的简化示例。只是不起作用的部分。我有一个角度项目（实际上是本地脚本角度项目，但我想问题实际上出在角度上）。使用的angular版本是8.2.x。

我有以下app-routing.module.ts，它基本上将所有内容重定向到HomeModule：

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule) }
];

然后是home-routing.module.ts，其中包含以下内容：

const routes: Routes = [
    {
        path: '',
        component: HomeComponent,
        children: [
            {
                path: '',
                component: Outlet1Component,
                outlet: 'outlet1',
            },
            {
                path: '',
                component: Outlet2Component,
                outlet: 'outlet2',
            },
        ],
    },
];

现在HomeComponent已成功加载，并且其中有几个命名的插座，我希望这些插座也加载它们自己的组件，这些组件是在路由器中配置的。但是该部分不起作用，我现在不解决该问题。

UPDATE

这里有2个Nativescript游乐场示例：

• version 1
• version 2

第一个版本正常工作（按角度逻辑），并加载了用于出口的组件。第二个版本不加载用于出口的组件。

还提供本地脚本回购issue。

Answer 1

您只需要进行一些小的更改。

将您的app-routing.module.ts更改为

const routes: Routes = [
    { path: '', redirectTo: '/home/default/(outlet1:outlet1route//outlet2:outlet2route)', pathMatch: 'full' },
    { path: 'home', loadChildren: () => import('~/app/home/home.module').then((m) => m.HomeModule) }
];

和home-routing.module.ts到

const routes: Routes = [
    {
        path: 'default',
        component: HomeComponent,
        children: [
            {
                path: 'outlet1route',
                component: Outlet1Component,
                outlet: 'outlet1',
            },
            {
                path: 'outlet2route',
                component: Outlet2Component,
                outlet: 'outlet2',
            },
        ],
    },
];

这将导航到主页组件，然后将在各自的插座中加载Outlet1Component和Outlet2Component。