Wie konfiguriere ich das Routing in eckigen 4, so dass die Routen der Feature-Module in der Reihenfolge ihrer Kinder angezeigt werden?

Question

Projektstruktur:

/app 
    app.module.ts 
    app.routing.ts 
    : 
    : 
    /dashboardModule 
    /manage-productModule 
     manage-product.module.ts 
     manage-product.routing.ts 

In

[ 
    { 
    path : '', 
    loadchildren: 'loginModulepath/loginmoduleName#className' 
    }, 
    { 
    path : 'dashboard', 
    component: dashboardReportComponent 
    } 
    { 
    path : 'manage-products' 
    loadchildren: 'manage-productModule-path/manage-product-moduleName#manageProductClassName' 
    } 
] 

Im Modul 'app.routing.ts': verwalten Produkte/verwalten-product.routing.ts

const manageProdRoute = 
[ 
    { 
    path : '', 
    component: manageProductListComponent 
    }, 
    { 
    path : 'detail', 
    component: manageProdDetailComponent 
    } 
] 

Und ,

import:[ routerModule.forChild(manageProdRoute)] 

Ziel:

Wenn Benutzertypen url:port/ => es url:port/login/ umleitet Wenn Benutzer tippt/Klick auf den Link url:port/manage-products gehen => wird es manageProductListComponent

Problem

Aber laden, wenn Ich versuche URL:port zu laden, um zur Anmeldeseite zu gehen, stattdessen lädt es manageProductListComponent. Auch wenn ich manage-product Abschnitt aus app.routing.ts auskommentieren verhält es sich genauso, aber wenn ich alle Kinder aller Module im Detail in app.routing.ts erwähne, dann funktioniert es richtig.

Frage Was ich brauche alle Modul-basiertes Routing in einzelnen routing.ts zu halten zu tun und sie in app.routing.ts importieren, so dass sie um arbeiten?

Answer 1

Sie können das folgende Codebeispiel verwenden: -

[ 
{ path: '', redirectTo: 'login', pathMatch: 'full'}, 
{ path: 'login', 
    children: [ 
     { path: '', component: yourLoginComponent}, 
     { path: 'dashboard', component: your-dashboardReportComponent},  
    ] 
}, 
{ path: 'manage-products', 
    children: [ 
     { path: '', component: your-manageProdDetailComponent},   
    ] 
}, 
]; 

Sie leer pathmatch als manageProductListComponent die

verursachen Problem

{ 
    path : '', 
    component: manageProductListComponent 
},