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

问题描述

这是预期的用户界面:

enter image description here

但实际的 UI 正在呈现

enter image description here

这里是 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/

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...