Angular 2 导入另一个 "sibling" 模块注入了错误的组件

Question

所以我有这样的模块结构：

app 
----pages
---------dashboard
---------posts

dashboard和posts都有自己的路由。

这是路由的样子：

页数

const routes: Routes = [ 
  {
    path: '',
    component: Pages,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: './dashboard#DashboardModule' } 
      { path: 'posts', loadChildren: './posts#PostsModule' }
    ]
  }
];

export const routing = RouterModule.forChild(routes);

仪表板

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent
  }
];

export const routing = RouterModule.forChild(routes);

帖子

const routes: Routes = [
    {
        path: '',
        component: PostsComponent
    },
    ...
];
const routing = RouterModule.forChild(routes);

一切正常，但是当我尝试像这样在 DashboardModule 中导入 PostsModule 时：

import { PostsModule } from '../posts';

@NgModule({
  imports: [
    routing, // Dashboard routes
    CommonModule, 
    ...
    PostsModule
  ]
})
export class DashboardModule { }

并加载 http://localhost:3000/#/dashboard，它显示 PostsComponent 而不是 DashboardComponent 只是因为我导入了 "sibling" 模块

我该如何解决这个问题？

Answer 1

在我看来，通过将 PostsModule 加载到 DashboardModule，您还导入了 PostModule 路由，这是不正确的。由于路由定义的顺序很重要，因此页面中放置了不正确的组件

没有看到完整的模块，就不可能说出您的预期设计。但是，我会将 PostsModule 中的任何公共服务和组件分离到 PostsCommonModule:

@NgModule({
  declarations: [
     //common components
  ],
  providers; [
     //common service
  ]
})
export class PostsCommonModule { }

with 可以被 PostsModule 和 DashboardModule 导入：

import { PostsCommonModule  } from './posts-common.module';

@NgModule({
  imports: [PostsCommonModule]
  //...
})
export class PostsModule { }

//dashboard.module

import { PostsCommonModule  } from '../posts/posts-common.module';

@NgModule({
  imports: [PostsCommonModule]
  //...
})
export class DashboardModule { }

Angular 2 导入另一个 "sibling" 模块注入了错误的组件

Angular 2 importing another "sibling" module injects the wrong Component

components

typescript

angular2-routing

ng-modules

angular