Использование Angular Router для загрузки компонента внутри компонента - PullRequest
Новая
       13

Использование Angular Router для загрузки компонента внутри компонента

0 голосов
/ 20 апреля 2020

Я использую Ioni c framework (v5) и внедряю Angular Router для загрузки приложения со следующей структурой.

Приложение 

 - Tabs
 -- Tab 1
 -- Tab 2
 -- Tab 3

Это стандартный шаблон, который можно выбрать для настройки Ioni c. Таким образом, эта навигация работает правильно, используя настройки маршрутизатора Angular ниже.

app.module.ts 

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, BrowserAnimationsModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } //     { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts 

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.module.ts 

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

tabs-routing.module.ts 

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

Я пытаюсь создать дополнительное меню на каждой вкладке, в котором используется система навигации, аналогичная вкладкам материалов https://material.io/components/tabs#. Каждая вкладка будет загружать встроенный отдельный компонент. Таким образом, вкладка 1 останется активной и будет по-прежнему позволять пользователю переходить между разделами 1, 2 или 3.

Приложение 

 - Tabs
 -- Tab 1
 --- Section 1
 --- Section 2
 --- Section 3
 -- Tab 2
 --- Section 1
 --- Section 2
 --- Section 3
 -- Tab 3
 --- Section 1
 --- Section 2
 --- Section 3

Это то, что у меня пока есть для

tab1.module.ts 

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }]),
    MaterialModule,
    Tab1PageRoutingModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

tab1-routing.module.ts 

const routes: Routes = [
  {
    path: 'tab1',
    component: Tab1Page,
    children: [
      {
        path: 'section1',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]             
      },
      {
        path: 'section2',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]     
      },
      {
        path: 'section3',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]     
      },
      {
        path: '',
        redirectTo: '/tabs/tab1/section1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1/section1',
    pathMatch: 'full'
  }
];

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

Но когда я пытаюсь перейти к / section1 с маршрута / tabs / tab1, который он представляет сообщение об ошибке 

Error: Cannot match any routes. URL Segment: 'section1'

1 Ответ

1 голос
/ 20 апреля 2020

У вас уже есть маршрут tab1 в tabs-routing.module.ts и в tab1-routing.module.ts, вы снова объявляете маршрут tab1 с дочерними элементами section1. Так что сейчас у вас действительно есть tabs/tab1/tab1/section1. Затем в tab1-routing.module.ts вы перенаправляете с '' на /tabs/tab1/section1, который не существует. Вам нужно изменить перенаправление маршрута '' в tab1-routing.module.ts на: 

{
  path: '',
  redirectTo: '/tabs/tab1/tab1/section1',
  pathMatch: 'full'
}

Также обратите внимание, что в tab1.module.ts вы импортируете два модуля маршрутизатора. Это может привести к странным результатам. 

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }]), //<- here
    MaterialModule,
    Tab1PageRoutingModule // <- and here
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}
...