用于命名插座的角延迟加载

Question

首先让我提一下，下面提到的是我所有路线的简化示例。只是不工作的部分。我有一个角度项目（它实际上是 nativescript 角度项目，但我猜问题实际上出在角度）。使用的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 已成功加载，其中有几个命名的插座，我希望这些插座也加载自己的组件，这些组件在路由器中配置。但是那部分不起作用，我现在不知道如何解决它。

更新

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

• version 1
• version 2

第一个版本可以正常工作（按角度逻辑）并为插座加载组件。第二个版本不加载插座组件。

还有 nativescript repo 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。