Angular 2 einen weiteren „Geschwister“ Modul einge spritzt die falsche Komponente

Question

Also hat ich eine Modulstruktur wie diese:

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

Beide dashboard und posts ihr eigenes Routing haben.

Hier ist, wie das Routing wie folgt aussieht:

Seiten

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

Armaturenbrett

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

export const routing = RouterModule.forChild(routes); 

Beiträge

Alles funktioniert gut, aber wenn ich versuche, die PostsModule im DashboardModule wie diese zu importieren:

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

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

und Last http://localhost:3000/#/dashboard, zeigt es die PostsComponent, statt DashboardComponent, nur weil ich die „Geschwister importiert "Modul

Wie kann ich das beheben?

Answer 1

Es scheint mir, dass die PostsModule in die DashboardModule durch das Laden Sie auch die PostModule Routen importieren, die nicht korrekt ist. Da die Reihenfolge der Routendefinitionen wichtig ist, wird die falsche Komponente auf der Seite platziert

Ohne die vollen Module zu sehen, ist es unmöglich, das gewünschte Design zu nennen. Ich würde jedoch trennen keine gemeinsame Dienste und Komponenten aus dem PostsModule in eine PostsCommonModule:

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

mit kann dann sowohl von PostsModule und DashboardModule importiert werden:

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