Angular 2 导入另一个 "sibling"模块会注入(inject)错误的组件

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，因为我导入了“兄弟”模块

我该如何解决这个问题？

Answer 1

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

如果没有看到完整的模块，就不可能说出您的预期设计。但是，我会将 PostsModule 中的任何公共(public)服务和组件分离到 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 { }