angular - Angular 2 导入另一个“兄弟”模块会注入错误的组件

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);

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

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出来PostsCommonModule：

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

with 可以同时由PostsModuleand导入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 { }