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

一切工作正常，但是當我嘗試在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和DashboardModule進口

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

：

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 { } 

不過，我會從 PostsModule任何普通服務和組件分成 PostsCommonModule