角度2の補助ルートが最初に動作し、その後のクリックでは機能しません。

Question

以下のコードに示すように、遅延ロードルートと補助ルートを定義しました。

export const MainRoutes = [ 
    { path: '', component: WelcomeComponent }, 
    { path: 'Customer', loadChildren: 'Modules/CustomerModule#CustomerModule' }, 
    { path: 'Supplier', loadChildren: 'Modules/SupplierModule#SupplierModule' }, 
    { 
     path: 'Help', 
     outlet: 'helpoutlet', 
     component: HelpComponent 
    } 
]; 

以下は、他のルートと補助ルートが呼び出されるコードです。以下は

<a [routerLink]="['/Supplier/Add']">Supplier</a> 
<a [routerLink]="['/Customer/Add']">Customer</a><br /> 
<a [routerLink]="[{outlets: {'helpoutlet': ['Help']}}]">Help</a> 

     <router-outlet></router-outlet> 
     <router-outlet name="helpoutlet"></router-outlet> 

サプライヤールートの下

export const SupplierRoutes = [ 
    { 
     path: 'Add', component: SupplierComponent 
    } 
]; 

するためのコードで、私は最初のサプライヤーのリンクに移動し、その後auxillaryルート（ヘルプ）にそれが動作するとカスタマー・ルート

export const CustomerRoutes = [ 
    { 
     path: 'Add', 
     component: CustomerComponent 

    }  
]; 

のコードです初めて。しかし、その後、顧客をクリックしてから補助的なルートをクリックすると、それは機能しません。他のルートは引き続き動作します。補助ルートは画面から消えます。

他のルートは遅延ロードされていますが、それは問題ですか？接着剤のように詰まっています。

Answer 1

私のローカル環境で試してみましたが、うまくいきます。私はあなたの遅延ロードモジュールに問題があると思う、モジュール内のルートを適切にロードしていない。私は怠惰なローディングを使用していると私は問題ではないと思う。私は自分のコードを添付しています。見てください。 auxillaryルートに問題があるように思え

app.routes.module.ts

import { NgModule } from '@angular/core'; 
import { AuthUserGuard, ClientSaaSUserGuard } from './app.guards'; 
import { Routes, RouterModule, CanActivate, } from '@angular/router'; 
import { DashboardComponent, LoginComponent, RegistrationComponent, PageNotFoundComponent } from './components/common'; 

const APP_ROUTES: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegistrationComponent}, 
    { path: 'consult', loadChildren:'./modules/consult/consult.module#PmConsultingModule'}, 
    { path: 'saas', loadChildren:'./modules/saas/saas.module#SaasModule'}, 
    { path: 'logAux', component: LoginComponent, outlet: 'topNav' } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(APP_ROUTES) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class MainRoutesModule {}; 

app.component.html

<a [routerLink]="['register']">Register</a> 
<a [routerLink]="['/consult']">Consult</a> 
<a [routerLink]="[{ outlets: { 'topNav': ['logAux'] } }]">Aux</a> 

<router-outlet></router-outlet> 
<div style="color: green; margin-top: 1rem;">topNav bar:</div> 
<div style="border: 2px solid blue; padding: 1rem;"> 
    <router-outlet name="topNav"></router-outlet> 
</div> 

consult.routes.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule, CanActivate, } from '@angular/router'; 
import { PMConsultUserGuard, AdminUserGuard } from './../../app.guards'; 
import { PMDashboardComponent } from './index'; 
import { PmConsultingComponent } from './consult.component' ; 

const PMCONSULTING_ROUTES: Routes = [ 
    { path: '', component: PmConsultingComponent, children: [ 
     { path: 'admin', component: PMDashboardComponent , canActivate: [AdminUserGuard] }, 
     { path: 'pm', component: PMDashboardComponent , canActivate: [PMConsultUserGuard] } 
    ]}, 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(PMCONSULTING_ROUTES) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class PMConsultingRoutesModule {};