web-dev-qa-db-ja.com

名前付きルーティングアウトレットをloadChildrenで機能させる方法は？

ルーティングのloadChildrenとコンセントナビゲーションの問題に関して2つのプランカーを作成しました。何らかの理由で、ロードされた子モジュール内に空のベースパスがあると、アウトレットナビゲーションでは機能しません。

this の例では、「連絡先」リンクを押すと失敗します。

app-routing.module

const appRoutes: Routes = [
  { path: 'admin', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admin', pathMatch: 'full' }
];

admin-routing.module

const adminRoutes: Routes = [
{ 
  path: '', 
  component: AdminComponent,
  children: [ 
    {
      path: 'compose',
      component: ComposeMessageComponent,
      outlet: 'popup'
    }
  ]
}];

this の例では、「連絡先」リンクを押すと機能します。

app-routing.module

const appRoutes: Routes = [
  { path: 'admi', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admi/n', pathMatch: 'full' }
];

admin-routing.module

const adminRoutes: Routes = [
{ 
  path: 'n', 
  component: AdminComponent,
  children: [ 
    {
      path: 'compose',
      component: ComposeMessageComponent,
      outlet: 'popup'
    }
  ]
}];

違いは、app-routing.moduleとadmin-routing.moduleにあります。作業例には、admin-routing.moduleへの空のパスがありません。 documentation によると、空のパスがあると機能するはずです。

angularangular2-routingangular-routing
24
David Walschots

「Contact」のrouterLinkディレクティブのリンクパラメータ配列の最初のセグメントは、routerLinkを含むコンポーネントテンプレートの親ルートと対応するrouter-outletを参照します。 「失敗」シナリオのadmin-routingconfigではなく、app-routingconfigに名前付きrouter-outletのrouteconfigを配置する必要がありますが、他の原則の中で関心の分離があるため、これは望ましくない可能性があります。

「失敗する」と指定した最初の例と「機能する」という2番目の例の違いは、のパターンマッチング中にルート構成のangular routerredirectTo」が「バックトラック」する方法にあります。ルート。ただし、2番目の重要な側面は、マッチングの結果として評価される動作が、ルートのパターンマッチングの動作に影響を与えてはならないことです。

'fails'シナリオでは、ルートセグメント ''が一致し、redirectToがURLを '/ admin'に変更し、ルーターがパス '/ admin'に一致し、ルーターがadmin-routingconfigの空の文字列 ''に自動的に一致します。ルーティングが完了しました。 2番目の「成功」シナリオでは、パスは「」に一致し、redirectToは最初のセグメント「/ admi」に一致します。ルーターは、ルーティングがまだ完了していないため、URL「/ n」の2番目のセグメントを評価します。ルーターは、 app-routing config for match '/ n'で一致するものが見つからない場合、admin-routing configが評価され、2番目のセグメント '/ n'が一致し、ルーターは自動的に空の文字列 ''ルーティングが完了します。 「失敗」シナリオの問題は、<a [routerLink]="[{ outlets: {popup: ['compose']}}]">Contact</a>のリンクパラメータ配列が空の文字列であり、URLが現在「/ admin」であるということです。はい、主な違いは、ルーターによって自動的に評価される空の ''文字列が発生する階層内の場所、つまり、ルーターによるルート構成の評価が完了する場所です。微妙ですが、「失敗」シナリオで評価された空の文字列は、最上位のAdminComponentで完了します。したがって、ルーターパターンマッチングのバックトラッキングは、アプリルーティングルート構成のredirectToの結果として、親ルート 'admin'で自動的に空の文字列 ''を探します。 2番目の「成功」シナリオでは、ルート構成のルーター評価は、管理ルーティングルート構成「失敗」シナリオと比較して階層の下位レベルにある親「/ n」の子パス「」で完了します。したがって、2番目の「成功」シナリオでは、自動的に評価される「空の文字列」は、<a [routerLink]="['', { outlets: {popup: ['compose']}}]">Contact</a>がクリックされたときにアプリルーティングルート構成からのリダイレクトの影響を受けません。

「失敗」シナリオのルーティング構成を修正するには、Contact routerLinkディレクティブのlinksパラメーター配列の最初のセグメントを変更して管理パス（<a [routerLink]="['/admin', { outlets: {popup: ['compose']}}]">Contact</a>）を指定するか、空の階層を変更する必要があります。文字列 ''ルーターの完了によって自動的に評価されるパスが発生します。

ルーターによって自動的に評価される空の文字列 ''パスが親であるルート構成階層を変更して「修正」するには、空の文字列 ''パスの親が空の文字列 'であってはならないことに注意することが重要です。 ' 道。例：

const devNavRoutes: Routes = [
  {
    path: '',
    component: DevNavContainerComponent, canActivate: [ DevNavAuthGuard1Service ],
    children: [
      { path: '', canActivateChild: [ DevNavAuthGuard1Service ],
        children: [
          { path: '', redirectTo: 'dashboard' },
          { path: 'dashboard', component: DevNavDashboardComponent,
            children: [
              { path: ':auxiliaryId', component: DevNavAuxiliaryComponent, outlet: 'auxiliary'},
              { path: ':ancillaryId', component: DevNavAncillaryComponent, outlet: 'ancillary' }
            ] },
          { path: ':id', component: DevNavDashboardComponent,
            children: [
              { path: ':auxiliaryId', component: DevNavAuxiliaryComponent, outlet: 'auxiliary'},
              { path: ':ancillaryId', component: DevNavAncillaryComponent, outlet: 'ancillary' }
            ] },
        ] },
    ] } 
];

注意：

// dev-nav-container.component
<router-outlet></router-outlet>

そして

// dev-nav-dashboard.component
<router-outlet name="auxiliary"></router-outlet> 
<router-outlet name="ancillary"></router-outlet>
1
ebduhon

以下の解決策は、必要な数のアウトレットで機能します。 second.component.tsでも同じことができます。

first.module.ts

const routerConfig: Routes = [
    {path: '', component: FirstComponent},

    {
        path: 'posts', component: FirstComponent, children: [{
            path: '',
            loadChildren: './second.module#SecondModule'
        }]
    }
}

first.component.html

// ....
<router-outlet></router-outlet>
// ....
0
Nebojsa Sapic