Question

您好开发人员我正在尝试在我的应用程序中实现延迟加载的逻辑，但由于某种原因它不起作用。

我之前创建了 2 个页面，特别是它的模块和路由模块，第三个页面将是前两个页面的管理角色，处理它们的路由，并导入到应用程序模块。对于第一个组件（tab1 和 tab2），我设置了这个逻辑：

FIRST SETTING ITS ROUTING MODULE

import { Tab1Component } from './tab1.component';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

const routes: Routes = [
  {
    path: '',
    component: Tab1Component/Tab2Component,
  },
];

@NgModule({
  declarations: [],
  imports: [CommonModule, RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class Tab1RoutingModule/Tab2RoutingModule {}

然后为每个文件夹（tab1和tab2）建立它们的模块

SECOND SETTING THE MODULE FILE FOR EACH COMPONENT

import { Tab1RoutingModule } from '../tab1/tab1-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Tab1Component } from './tab1.component';

@NgModule({
  declarations: [Tab1Component],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    Tab1RoutingModule/Tab2RoutingModule
  ],
  exports:[Tab1Component]
})
export class Tab1Module/Tab2Module {}

在第三个组件中，我通过 loadchildren 设置了管理组件，前两个组件的模块代表如下

THIRD ADMINSTRATIVE PAGE SETTING ALL CHILDREN ROUTES

import { NgModule } from '@angular/core';
import { MenuAdminComponent } from './menu-admin.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'tabs',
    component: MenuAdminComponent,
    children: [
      {
        path: 'tab1',
        loadChildren: () =>
          import('../../pages/tab1/tab1.module').then((m) => m.Tab1Module),
      },
      {
        path: 'tab2',
        loadChildren: () =>
          import('../../pages/tab2/tab2.module').then((m) => m.Tab2Module),
      },
    ],
  },
  {
    path: '**',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full',
  },
];

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

它的模块导入了其他组件的前两个模块，就这样建立起来：

import { MenuAdminRoutingModule } from '../menu-admin/menu-admin-routing.module';
import { MenuAdminComponent } from '../menu-admin/menu-admin.component';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { Tab2Module } from '../tab2/tab2.module';
import { Tab1Module } from '../tab1/tab1.module';

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [MenuAdminComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    Tab2Module,
    Tab1Module,
    MenuAdminRoutingModule,

    MatToolbarModule,
    MatIconModule,
  ],
  exports: [MenuAdminComponent],
})
export class MenuAdminModule {}

然后在我的应用程序模块路由上，我会调用该管理页面：

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

const routes: Routes = [

      {
        path: '',
        loadChildren: () =>
          import('./pages/menu-admin/menu-admin.module').then((m) => m.MenuAdminModule),
      },

];

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

应用模块会引入之前的组件模块

import { MenuAdminModule } from './pages/menu-admin/menu-admin.module';
import { ComponentsModule } from './components/components.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { Tab1Module } from './pages/tab1/tab1.module';
import { Tab2Module } from './pages/tab2/tab2.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
   
    ComponentsModule,
    MenuAdminModule,
    Tab1Module,
    Tab2Module

  ],


  bootstrap: [AppComponent]
})
export class AppModule {}

但是由于某种原因，当我将路由设置为 tab1 或 tab2 时，路由器将我设置在管理页面（'menu-admin-works'）上。在这里 https://stackblitz.com/github/enriquefgf86/bookmark-material 我设置了问题。任何帮助将是惊人的。真的谢谢！！！

Answer 1

问题在于您的路由结构和组件：-

我将菜单路由配置更改为：-

import { NgModule } from '@angular/core';
import { MenuAdminComponent } from './menu-admin.component';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { MenuHomeComponent } from './menu-home/menu-home.component';

const routes: Routes = [
  {
    path: 'tabs',
    component: MenuAdminComponent,
    children: [
      {
        path: '',
        component: MenuHomeComponent
      },
      {
        path: 'tab1',
        loadChildren: () =>
          import('../../pages/tab1/tab1.module').then((m) => m.Tab1Module),
      },
      {
        path: 'tab2',
        loadChildren: () =>
          import('../../pages/tab2/tab2.module').then((m) => m.Tab2Module),
      },
    ],
  },
  // {
  //   path: '**',
  //   redirectTo: '/tabs/tab1',
  //   pathMatch: 'full',
  // },
];

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

其中菜单主页组件是一个新组件。

我把菜单管理组件的模板改成了 menuhomecomponent。

我在菜单管理组件中添加了一个路由器插座。

这就是所谓的嵌套路由器插座，您可以在此处阅读更多信息：- https://medium.com/dev-genius/the-art-of-nested-router-outlets-in-angular-dafb38245a30

工作堆栈闪电战：- https://stackblitz.com/edit/github-g1cauu?file=src/app/pages/menu-admin/menu-admin-routing.module.ts

在 Angular 上设置延迟加载无法正常工作

1 个答案: