[英]main component rendered twice in the Router outlet after implementing lazy load modules - Angular 8
Here is the expected UI:这是预期的用户界面:
But the actual UI is rendering但实际的 UI 正在渲染
Here is the app-routing.module.ts这是 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 Post.module.ts
const routes:Routes=[
{path:'', component: PostslistComponent,
children:[
{path:'update/:id', component:UpdatepostComponent,
},
{path:'add',component:AddpostComponent,
},
]
}
];
===================================================== app.component.html (which has main router outlet) ==================================================== === 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 Here I have another router outlet to add / update /delete the post ==================================================== ======= postslist.component.html 这里我有另一个路由器插座要添加/更新/删除帖子
<div class="col-md-4">
<router-outlet></router-outlet>
</div>
The problem is here, in the above router outlet the same component is being rendered again, would anyone pls help me to resolve?问题就在这里,在上面的路由器插座中再次呈现相同的组件,有人可以帮我解决吗?
This is because you imported PostListComponent
at parent routing.这是因为您在父路由中导入PostListComponent
。 Just remove it, as well as remove your PostModule import from your parent module @ngModule
decorator.只需将其删除,并从您的父模块@ngModule
装饰器中删除您的 PostModule 导入。
Simply it must be简单地说,它必须是
{
path:'posts',
loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),
}
As long as your code was working, it means, you imported PostModule to your parent module, that must be deleted.只要您的代码正常工作,这意味着您将 PostModule 导入到您的父模块,必须将其删除。
Use Named router-outlet, this helps in differentiating between multiple router-outlet.使用命名路由器插座,这有助于区分多个路由器插座。 You can refer below link for detailed examples.您可以参考以下链接以获取详细示例。
https://onehungrymind.com/named-router-outlets-in-angular-2/https://onehungrymind.com/named-router-outlets-in-angular-2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.