Angular 路由

Angular 路由

简单路由配置

每个带路由的 Angular 应用都有一个Router（路由器）服务的单例对象。 当浏览器的 URL 变化时，路由器会查找对应的 Route（路由），并据此决定该显示哪个组件。

路由器需要先配置才会有路由信息。

1. 定义路由

路由器必须用“路由定义”的列表进行配置。
每个定义都被翻译成了一个Route对象。该对象有一个 path 字段，表示该路由中的 URL 路径部分，和一个 component 字段，表示与该路由相关联的组件。

• 每个 Route 都会把一个 URL 的 path 映射到一个组件。 path 不能以斜杠（/）开头。 路由器会为解析和构建最终的 URL，这样当你在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。
• 路由器使用先匹配者优先的策略来选择路由。通配符路由 是路由配置中最没有特定性的那个，因此务必确保它是配置中的最后一个路由。

注意点：
重定向路由，即空路径路由，需要一个 pathMatch 属性，来告诉路由器如何用 URL 去匹配路由的路径，否则路由器就会报错。

从技术角度说，pathMatch = ‘full’ 导致 URL 中剩下的、未匹配的部分必须等于’’。

pathMatch 的另一个可能的值是 ‘prefix’，它会告诉路由器：当剩下的URL 以这个跳转路由中的 prefix 值开头时，就会匹配上这个跳转路由。

注意： 空路由和通配符路由的定义和用法详见下面的示例。

2. 注册路由器

要使用路由器，必须先注册来自 @angular/router 包中的 RouterModule。 定义一个路由数组 appRoutes 并把它传给 RouterModule.forRoot() 方法(注：在根路由中使用此方法)。 它会返回一个模块，其中包含配置好的 Router 服务提供商，以及路由库所需的其它提供商。 一旦启动了应用，Router 就会根据当前的浏览器 URL 进行首次导航。

注意： RouterModule.forRoot() 方法是用于注册全应用级提供商的编码模式.

3. 添加路由出口

<router-outlet></router-outlet>

简单路由配置示例

src/app/app.module.ts 文件内容

// 定义路由数组
const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    data: { title: '登录模块' }
  },
  { 
  	path: 'welcome',
    component: WelcomeComponent,
    data: { title: '欢迎组件'}
  },
  { path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  { 
  	path: '**',
  	component: PageNotFoundComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ],
  ...
})
export class AppModule { }

app.module.ts 文件内容说明：

• 第一个路由中的data 属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问，并能用来保存诸如 页标题、面包屑以及其它静态只读数据。
• 第三个路由中的空路径(’’)表示应用的默认路径，当 URL 为空时就会访问那里，因此它通常会作为起点。 这个默认路由会重定向到 URL /login，并显示 LoginComponent。
• 最后一个路由中的 ** 路径是一个通配符。当所请求的 URL 不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。 这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。

注意：

• 每个 Route 都会把一个 URL 的 path 映射到一个组件。 path 不能以斜杠（/）开头。 路由器会为解析和构建最终的 URL，这样当你在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。
• 这些路由的定义顺序是刻意如此设计的。路由器使用先匹配者优先的策略来匹配路由，所以，具体路由应该放在通用路由的前面。 在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它能匹配上每一个 URL，因此应该只有在前面找不到其它能匹配的路由时才匹配它。

---

路由模块

路由模块是设计选择，它的价值在配置很复杂，并包含专门守卫和解析器服务时尤其明显。 在配置很简单时，它可能看起来很多余。

将路由配置重构为路由模块

在 /app 目录下创建一个 AppRouting 模块，以包含路由配置。

ng generate module app-routing --module app --flat

第1步： 在 AppRoutingModule 中配置路由信息，将 RouterModule 添加到该模块的 exports 数组中，以便再次导出它 。
第2步： 将 AppRoutingModule 导入AppModule 模块。

导入路由的顺序

在 app.module.ts 文件的imports数组中，AppRoutingModule 是最后一个。

---

子路由配置

1. 定义路由

示例如下：

const crisisCenterRoutes: Routes = [
 {
   path: 'crisis-center',
   component: CrisisCenterComponent,
   children: [
     {
       path: '',
       component: CrisisListComponent,
       children: [
         {
           path: ':id',
           component: CrisisDetailComponent
         },
         {
           path: '',
           component: CrisisCenterHomeComponent
         }
       ]
     }
   ]
 }
];

在上述示例中，路由对象最外层的 path 表示一级路由，children 数组中的路由为次一级路由。

2. 注册路由器

在子路由模块中注册路由器使用 RouterModule.forChild() 方法。

3. 将子路由模块导入到根路由模块中

将子路由模块导入到 AppModule 的 imports 数组中，放在 AppRoutingModule 前面。

---

路由懒加载(惰性加载路由配置)

将子路由定义的children 属性 替换为 loadChildren 属性。 loadChildren 属性接收一个函数，该函数使用浏览器内置的动态导入语法 import(’…’) 来惰性加载代码，并返回一个承诺（Promise）。

惰性加载和重新配置工作只会发生一次，也就是在该路由首次被请求时。在后续的请求中，该模块和路由都是立即可用的。

  {
    path: 'table',
    loadChildren: () => import('./table/table.module').then(m => m.TableModule)
  }

{ 
	path: 'table',
	loadChildren: 'app/routes/table/table.module#TableModule'
}

在定义路由时，在 loadChildren 字段值中可以使用绝对路径，也可以使用相对路径。

当使用绝对路径时，NgModule 的文件位置必须以 src/app 开头，以便正确解析。

---

—— END ——