我正在尝试配置我的路由如下:
''=>布局页面'home => home'这个有另一个路由器插座来切换视图的详细信息/:id'/ home的子节点,将由第二个路由器插座呈现
我的路由模块.ts
[
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent,
children: [
{
path: 'home/details/:id',
component: ContactDetailsComponent,
outlet: 'out2'
},
}
];
家长component.html
<some-tags></some-tags>
<router-outlet></router-outlet>
首页 - component.html
<main class="d-flex">
<app-contact-list></app-contact-list>
<router-outlet name="out2"></router-outlet>
</main>
我在这里缺少什么?,在此先感谢:)
弄清楚了
因为我在一个模块中有所有组件,即我的所有组件都是彼此的兄弟,所以我不需要添加另一个名为<router-outlet>
,这可以通过单个<router-outlet>
完成。
以前的路线适用于我从路线中删除出口并使用延迟加载的路线。
修改路线
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, children: [
{ path: ':id/details', component: Component2 },
{ path: ':id/update', component: Component3 },
{ path: 'add', component: Component4 },
] },
];