主要组件在实现延迟加载模块后在路由器出口渲染两次-Angular 8

以下是预期的用户界面：

但实际的UI是渲染的

这是app-routing.module.ts

const routes: Routes=[
{path: '',component: HomeComponent},
{path:'counter',
loadChildren:() => import('./counter/counter.module').then((m)=> m.CounterModule)
},
{path:'posts', component: PostslistComponent,

loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),

}
];

const routes:Routes=[
{path:'', component: PostslistComponent,
children:[
{path:'update/:id', component:UpdatepostComponent,
   
},
{path:'add',component:AddpostComponent, 
},
  
]
}
];

========================================================

Post.module.ts

const routes: Routes=[
{path: '',component: HomeComponent},
{path:'counter',
loadChildren:() => import('./counter/counter.module').then((m)=> m.CounterModule)
},
{path:'posts', component: PostslistComponent,

loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),

}
];

const routes:Routes=[
{path:'', component: PostslistComponent,
children:[
{path:'update/:id', component:UpdatepostComponent,
   
},
{path:'add',component:AddpostComponent, 
},
  
]
}
];

===================================================== app.component.html（具有主路由器出口）

========================================================= postslist.component.html 这里我有另一个路由器出口来添加/更新/删除帖子

<div class="col-md-4">
<router-outlet></router-outlet>
     
</div>

问题是，在上面的路由器出口中，相同的组件再次被渲染，

---

有人能帮我解决吗？

这是因为您在父路由中导入了

PostListComponent

。只需删除它，以及从父模块

@ngModule

装饰器中删除模块后导入

一定是这样

{
  path:'posts',
  loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),
}

---

只要代码正常工作，就意味着将PostModule导入父模块，必须将其删除。

使用命名路由器出口，这有助于区分多个路由器出口。 有关详细示例，请参阅下面的链接

---

非常感谢，它现在可以正常工作了。谢谢你的帮助！不客气：）