实施延迟加载模块后,主要组件在路由器插座中呈现两次 - Angular 8
main component rendered twice in the Router outlet after implementing lazy load modules - Angular 8
这是预期的 UI:
但实际UI正在渲染
这是应用-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
这里我有另一个路由器插座来添加/更新/删除 post
<div class="col-md-4">
<router-outlet></router-outlet>
</div>
问题出在这里,在上面的路由器插座中再次渲染相同的组件,
谁能帮我解决一下?
这是因为您在父路由中导入了 PostListComponent
。只需删除它,并从您的父模块 @ngModule
装饰器中删除您的 PostModule 导入。
简直就是必须的
{
path:'posts',
loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),
}
只要您的代码可以正常工作,就意味着您将 PostModule 导入了您的父模块,必须将其删除。
使用命名路由器插座,这有助于区分多个路由器插座。
您可以参考下面link了解详细示例。
https://onehungrymind.com/named-router-outlets-in-angular-2/
这是预期的 UI:
但实际UI正在渲染
这是应用-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 这里我有另一个路由器插座来添加/更新/删除 post
<div class="col-md-4">
<router-outlet></router-outlet>
</div>
问题出在这里,在上面的路由器插座中再次渲染相同的组件, 谁能帮我解决一下?
这是因为您在父路由中导入了 PostListComponent
。只需删除它,并从您的父模块 @ngModule
装饰器中删除您的 PostModule 导入。
简直就是必须的
{
path:'posts',
loadChildren:() => import('./posts/posts.module').then((m)=>m.PostsModule),
}
只要您的代码可以正常工作,就意味着您将 PostModule 导入了您的父模块,必须将其删除。
使用命名路由器插座,这有助于区分多个路由器插座。 您可以参考下面link了解详细示例。
https://onehungrymind.com/named-router-outlets-in-angular-2/