实现延迟加载模块后，主要组件在路由器插座中呈现两次 - Angular 8

Question

这是预期的用户界面：

但实际的 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),

}
];

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

Post.module.ts

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

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

<div class="container">
<app-header></app-header>
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
  
</div>
</div>
</div>

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

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

问题就在这里，在上面的路由器插座中再次呈现相同的组件，有人可以帮我解决吗？

Answer 1

这是因为您在父路由中导入PostListComponent 。 只需将其删除，并从您的父模块@ngModule装饰器中删除您的 PostModule 导入。

简单地说，它必须是

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

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

Answer 2

使用命名路由器插座，这有助于区分多个路由器插座。 您可以参考以下链接以获取详细示例。

https://onehungrymind.com/named-router-outlets-in-angular-2/