离子惰性加载子数组中的模块

Question

我有一个Ionic应用程序，它在List Page Module下有一个Subdir Page Module和一个Page module。这是文件夹结构---> list/subdir.

问题：当我导航到List page module而不是localhost:8100/list/subdir加载时，总是遇到Subdir page加载的问题。

结果：我希望在导航到Subdir page时加载localhost:8100/list/subdir；而是加载List page。我只想在URL为List page

时加载localhost:8100/list

app.routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule'
  },
  {
    path: 'list',
    loadChildren: './list/list.module#ListPageModule'
  }
];

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

list.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { ListPage } from './list.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: ListPage,
        children: [
          {
            path: 'subdir',
            loadChildren: './subdir/subdir.module#SubdirPageModule',

          }
        ]
      }
    ])
  ],
  declarations: [ListPage]
})
export class ListPageModule {}

Answer 1

每当您在另一条路线的子级数组中具有一条路线时，子级和父级组件都会被注入到模板中。

这是因为父级将在（例如）全局级别上使用（可能在app.component.html中），而子级组件将在其子级使用父母模板。因此，您最终将同时显示两个组件。

如果您有兴趣在视图中看不到父组件，则需要摆脱List和Subdir之间的父子关系。

为此，您将有两个选择：

1）将ListPage组件移至子路由，例如list / list

或

2）将Subdir组件移到上一级。