角度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、それは私が「兄弟をインポートしたからといって代わりDashboardComponentの、PostsComponentを示し"モジュール

どうすればこの問題を解決できますか？

Answer 1

DashboardModuleへPostsModuleをロードすることによって、あなたも間違っていPostModuleルートをインポートしているように私には思えます。経路定義の順序が重要であるため、間違ったコンポーネントがページに配置されます

モジュール全体を見ることなく、意図した設計をすることは不可能です。しかし、私はPostsCommonModuleへPostsModuleから任意の共通サービスやコンポーネントを分離したい：

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

その後、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 { }