纯手写Angular 路由配置（两步实现）

三石er

于 2017-08-01 19:32:21 发布

阅读量357

点赞数

文章标签： angular 路由器算法手写路由

本文链接：https://blog.youkuaiyun.com/qq_24706757/article/details/76552030

版权

本文介绍如何手动配置Angular项目的路由，包括设置路由配置及在主模块中引用这些配置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在生成Angular项目的时候有可能会忘记加上 –routing，这样生成的文件中就不会有路由的配置文件，那么就需要我们手动写路由的配置文件。
手动写路由的配置文件也很简单，不需要我们另外生成新的文件，而是在app.module.ts中去写：
一共分为两步：
第一步：设置路由配置：

const routeCanfig: Routes = [
  {path:'',component:HomeComponent},
  {path:'product/:id',component:ProductDetailComponent}
]

第二步：在主模块中引用写好了的路由配置： RouterModule.forRoot(routeCanfig)
如果不是在子模块中设置的路由配置，那么应该在子模块中引用路由配置：
RouterModule.forChild(routerCanfig)

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routeCanfig)
  ],