angular 9 вложенных ленивых модулей с вложенными выходами маршрутизатора

Я пытаюсь разработать SPA с использованием angular 9, я почти пытаюсь лениво загружать каждый компонент и всех его дочерних элементов. Моя проблема возникла, когда я попытался установить роутер внутри одного из лениво загружаемых компонентов, и я хочу, чтобы этот роутер использовался для загрузки дочерних компонентов (которые также лениво загружаются). когда я это делаю, я всегда получаю все вложенные компоненты с отложенной загрузкой, загруженные в основной выход маршрутизатора в app.component.html вместо выхода маршрутизатора во вложенном компоненте с отложенной загрузкой

шаблон app.component:

<app-navbar></app-navbar>
<router-outlet></router-outlet>

app-routing.module:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'articles', loadChildren: () => import('./articles-viewer/articles-viewer.module').then(m => m.ArticlesViewerModule) },
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: '**', redirectTo: ''}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AppAngularMaterial
  ],
  providers: [
    AppHttpInterceptors
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

шаблон navbar.component:

<a routerLink="">Home</a>
<a routerLink="/articles">Articles</a>
<a routerLink="/dashboard">Dashboard</a>

шаблон приборной панели:

<a routerLink="statistics">Statistics</a>
<router-outlet></router-outlet>

dashboard.module:

@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule,
    AppAngularMaterial
  ]
})
export class DashboardModule { }

dashboard-routing.module:

const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'statistics', loadChildren: () => import('./statistics/statistics.module').then(m => m.StatisticsModule) }
  ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Вкратце, компонент статистики (компонент с отложенной загрузкой) загружается в маршрутизатор-выход, объявленный в шаблоне app.component, а не в маршрутизатор-выход в шаблоне панели мониторинга, и компонент панели мониторинга выгружается.

Я пытался найти решение в angular.io, но все, что у меня было, - это управление несколькими выходами в одном компоненте. Кроме того, это то, что я получил при поиске в Google этой проблемы.

есть ли решение для этого?


lazy-loading angular9 nested router-outlet
person m.a    schedule 11.06.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В dashboard-routing.module

Вместо этого:

const routes: Routes = [
    { path: '', component: DashboardComponent },
    { path: 'statistics', loadChildren: () => 
        import('./statistics/statistics.module').then(m => m.StatisticsModule)
    }
];

Сделай это:

const routes: Routes = [
    { path: '', component: DashboardComponent,
      children: [
          { path: 'statistics', loadChildren: () => 
           import('./statistics/statistics.module').then(m => m.StatisticsModule)
          }
      ]
    }
];
person Lars H    schedule 07.11.2020

arrow_upward
0
arrow_downward

У меня была аналогичная проблема! Проблема с моей стороны заключалась в том, что я импортировал модуль с отложенной загрузкой, и поэтому определение маршрутизации было видно для маршрутизатора-розетки приложения.

Если вам нужен пример, смело пишите комментарий.

person neox5    schedule 25.04.2021