angular如何处理多模块间的路由问题，模块1中如何使用模块2中的组件

一、需求&问题&版本

angular版本：angular 9

需求：

​ 1.将项目分成login，app-content，app-component等多模块

​ 2.多模块间的路由如何配置，模块间路由如何跳转

​ 3.模块1中如何使用模块2中的组件

项目架构

二、如何处理多模块多路由

重点：

1.模块的子路由的设置RouterModule.forChild()

2.根路由的引入子路由

1.根路由

跟路由中引入多个模块的子路由，确保跨模块的路由可相互跳转

@filename(app-routing.module)

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

const routes: Routes = [
  // 2.配置默认路由
  { path: '', pathMatch: 'full', redirectTo: 'page' },
  // 1.引入子模块的路由
  { path: 'login', loadChildren: () => import('./app-login/app-login.module').then(m => m.AppLoginModule) },
  { path: 'page', loadChildren: () => import('./app-content/app-content.module').then(m => m.AppContentModule) },
];

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

2.login模块的子路由设置

@filename(app-login.module)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AppLoginComponent } from './app-login.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [
  {
    path: '', component: AppLoginComponent, children: [
      { path: '', redirectTo: 'login', pathMatch: 'prefix' },
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent },
    ]
  }
]

@NgModule({
  declarations: [AppLoginComponent, LoginComponent, RegisterComponent],
  imports: [
    RouterModule.forChild(routes),
    CommonModule
  ]
})
export class AppLoginModule { }

3.app-content模块的子路由设置

import { NgModule } from '@angular/core';
import { CommonModule } from '@angularcommon';
// 1.引入依赖
import { RouterModule, Routes } from '@angular/router';

import { AppContentComponent } from './app-content.component';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './home/dashboard/dashboard.component';
import { OrderComponent } from './order/order.component';
import { OrderListComponent } from './order/order-list/order-list.component';

// 2. 设置路由
const routes: Routes = [
  {
    path: '', component: AppContentComponent, children: [
      { path: '', redirectTo: 'home', pathMatch: 'prefix' },
      {
          path: 'home', component: HomeComponent, children: [
              { path: '', redirectTo: 'dashboard', pathMatch: 'prefix' },
              { path: 'dashboard', component: DashboardComponent },
          ]
      },
    ]
  }
]

@NgModule({
  declarations: [AppContentComponent, HomeComponent, DashboardComponent, OrderComponent, OrderListComponent],
  imports: [
    RouterModule.forChild(routes), // 3.设置为子路由
    CommonModule
  ]
})
export class AppContentModule { }

三、如何在模块1的组件中使用模块2中的组件

例子

app-content模块中的app-content组件使用app-component模块中的header组件

1. 模块2中导出组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { SiderComponent } from './sider/sider.component';

const declarationsArr = [HeaderComponent, SiderComponent]

@NgModule({
  declarations: declarationsArr,
  imports: [
    CommonModule
  ],
  exports: declarationsArr // 重点：在这里导出
})
export class AppComponentModule { }

2.将模块2导入模块1

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
// 导入1
import { AppComponentModule } from '../app-component/app-component.module';
const routes: Routes = [ // ...];

@NgModule({
  declarations: [ // ...],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    // 导入2
    AppComponentModule,
  ]
})
export class AppContentModule { }

3.模块1的组件使用模块2的组件

<app-header></app-header>
<router-outlet></router-outlet>

参考1：

https://blog.csdn.net/wrs120/article/details/78612692/?utm_term=angular6%E8%B7%B3%E8%BD%AC&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-0-78612692&spm=3001.4430