如何解决实现延迟加载模块后，主要组件在路由器插座中呈现两次 - Angular 8
这是预期的用户界面：
但实际的 UI 正在呈现
这里是 app-routing.module.ts
axWindowsMediaPlayer1.stretchToFit = true;
axWindowsMediaPlayer1.Width *= 2;
axWindowsMediaPlayer1.Height *= 2;
================================================ ==========
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),}
];
================================================ ====== app.component.html（有主路由器插座）
const routes:Routes=[
{path:'',children:[
{path:'update/:id',component:UpdatepostComponent,},{path:'add',component:AddpostComponent,]
}
];
================================================ ========== 帖子列表.component.html 这里我有另一个路由器插座来添加/更新/删除帖子
<div class="container">
<app-header></app-header>
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
问题就在这里，在上面的路由器出口中，相同的组件再次被渲染， 有人可以帮我解决吗？
解决方法
这是因为您在父路由中导入了 PostListComponent。只需删除它，同时从父模块 @ngModule 装饰器中删除 PostModule 导入。
一定是这样
{
path:'posts',loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),}
只要您的代码在工作，就意味着您将 PostModule 导入到您的父模块中，必须将其删除。
,使用命名路由器插座，这有助于区分多个路由器插座。 您可以参考以下链接了解详细示例。
https://onehungrymind.com/named-router-outlets-in-angular-2/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。