web-dev-qa-db-ja.com

Angular 5遅延ロードされたモジュールの名前付きアウトレットのルートには一致しません

ルートモジュールの私のルートは次のとおりです：

        RouterModule.forRoot([
        { path: '', redirectTo: 'management-portal', pathMatch: 'full' },            
        { path: 'management-portal', loadChildren: './xxx/management-portal.module#ManagementPortalModule', canActivate: [AuthGuard] },          
        { path: 'login', component: LoginComponent },
        { path: '**', component: NotFoundComponent }
    ], {
       enableTracing: true 
    })

期待どおりに動作します。ログイン後にManagementPortalModuleにルーティングできます。遅延ロードされたManagementPortalModuleを見てみましょう。

名前付きのルーターコンセントがあります。

 <router-outlet name='sub'></router-outlet>

ManagementPortalModuleの私のルート。

    RouterModule.forChild([
  {
    path: '', component: ManagementPortalComponent,        
    children: [            
        { path: '', component: Test1Component, outlet: 'sub' },
        { path: 'test2', component: Test2Component, outlet: 'sub' }            
    ]
  }         
])

最初に「サブ」アウトレットにTest1Componentをロードできます。リンクをクリックしたときにTest2Componentにルーティングしたい

<a  [routerLink]="[{ outlets: { sub: ['test2'] } }]"></a>

生成されたURL

/ management-portal /（sub：test2）

クリックしても何も起こりませんでした。

<a [routerLink]="['',{ outlets: { sub: ['test2'] } }]">

URL

/ management-portal（sub：test2）

URLは this に従って正しい形式であると思います。クリックするとエラーが発生しました

どのルートにも一致しません。 URLセグメント： 'test2'

どうぞよろしくお願いいたします。

angularangular-routerrouterlinkrouter-outlet
8
LittleNewb

名前付きアウトレットルーティングを使用して、空ではないトップレベルパスを試します。

ManagementPortalModule内のルート。

    RouterModule.forChild([
  {
    path: 'load', component: ManagementPortalComponent,        
    children: [            
        { path: '', component: Test1Component, outlet: 'sub' },
        { path: 'test2', component: Test2Component, outlet: 'sub' }            
    ]
  }         
])

詳細については、次を参照してください： Angular 4名前付きルーターアウトレットを使用した遅延読み込みが機能しない

10
mohit uprim