首先,我要提到的是以下所有路线的简化示例。只是不起作用的部分。我有一个角度项目(实际上是本地脚本角度项目,但我想问题实际上出在角度上)。使用的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游乐场示例:
第一个版本正常工作(按角度逻辑),并加载了用于出口的组件。第二个版本不加载用于出口的组件。
还提供本地脚本回购issue。
您只需要进行一些小的更改。
将您的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。