当前位置：首页 > news >正文

app-routing.module.ts 简单介绍

news 2025/8/5 16:03:20

Angular的路由是一种功能，它允许应用程序响应不同的URL路径或参数并根据这些路径加载不同的组件。app-routing.module.ts是Angular项目中负责设置应用程序路由的文件。

以下是一个简单的app-routing.module.ts文件示例，它配置了三个路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { MyComponent } from './my-module/my-module.module';// 定义路由
const routes: Routes = [{ path: '', component: HomeComponent },{ path: 'about', component: AboutComponent }，{ path: 'my',loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModule) }
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

在这个例子中，HomeComponent被映射到根路径（''），而AboutComponent被映射到路径about，与前两种不同的是my路径下，采用的动态导入的方式导入路由。

RouterModule.forRoot(routes)用于初始化应用程序的主路由配置。

要使用这个模块，你需要在AppModule中导入它

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule // 导入AppRoutingModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

这样，Angular应用程序就会根据URL的路径来加载相应的组件。

`imports`和`exports`

在Angular中，‌imports和exports是NgModule装饰器中的两个重要属性，‌它们分别用于导入其他模块的声明以及导出本模块的声明，‌以便其他模块可以使用。‌

imports属性用于指定当前模块依赖的其他模块。‌这允许当前模块使用其他模块中声明的组件、‌指令、‌管道等。‌通过导入这些模块，‌当前模块可以访问并使用它们提供的服务和功能。‌
exports属性则用于指定当前模块中哪些声明（‌如组件、‌指令、‌管道）‌可以被其他模块访问和使用。‌当一个模块想要将其内部的某些声明暴露给其他模块时，‌可以通过exports属性来实现。‌这样，‌其他模块就可以在模板中使用这些被导出的声明。‌

简而言之，‌imports允许一个模块使用其他模块的功能，‌而exports则允许一个模块向其他模块提供自己的功能。‌这两个属性共同构成了Angular模块系统中的依赖和依赖关系管理机制，‌确保了模块之间的正确交互和功能的复用

动态导入

Angular中的动态导入是一种在运行时按需加载模块的技术，‌旨在优化应用程序的性能和加载时间。‌

动态导入允许开发者在运行时根据需要加载特定的模块，‌而不是在应用程序启动时一次性加载所有模块。‌这种技术可以显著减少初始加载时间，‌提高应用程序的响应速度和性能。‌在Angular中，‌动态导入的实现主要依赖于TypeScript的import()函数，‌它允许开发者异步加载JavaScript模块。‌

动态导入的语法相对简单，‌通过使用反引号包裹模块路径，‌然后使用import()关键字来异步加载模块。‌一旦模块加载完成，‌可以在.then()块中使用它。‌