angular路由

路由配置：路由配置是一个Routes类型的数组

例如：

const routes:Routes = [
    {
        path: '', component: BuildDataComponent,
        children: [
            {path: '', redirectTo: 'addData'},
            {
                path: 'addData', component: AddDataComponent, data: {breadcrumb: 'aaa'}
            },
            {
                path: 'test1', component: test1Component, data: {breadcrumb: 'bbb'}
            },
            {
                path: 'test2', component: test2Component, data: {breadcrumb: 'ccc'}
            }
        ]
    }
];

创建根路由模块：

通过调用RouterModule.forRoot()方法来创建根路由模块，并将其导入到应用的根模块中
例如：

@NgModule({
   
    bootstrap: [App],
    declarations: [App, ExceptionComponent],
    imports: [
        RouterModule.forRoot(routes), // 
        RouterModule.forRoot()方法来创建根路由模块
    ]
})

添加RouterOutlet指令

RouterOutlet指令的作用是在组件的模板中开辟出一块区域，用于显示URL所对应的组件。Angular将在模板中使用了标签的组件统称为路由组件。
例如：

路由策略

路由策略决定angular将使用URL的哪一部分来和路由配置项的path属性进行匹配。angular提供了PathLocationStrategy和HashLocationStartegy两种路由策略，分别表示使用URL的path部分和hash部分来进行路由匹配。
1.HashLocationStartegy介绍
http://localhost:3000/#/list
（1）浏览器向服务器发送请求的时候不会带上hash部分的内容。#后面的部分是hash的内容
（2）更改url的hash部分不会向服务器重新发送请求，这就使得在进行跳转的时候不会引起页面的刷新和应用的重新加载。
2.PathLocationStrategy介绍
http://localhost:3000/list
作为angular的默认路由策略，其最大的优点是为服务器端的渲染提供了可能。
例如：
浏览器向服务器端发送请求http://localhost:3000/list，服务器可以通过解析URL的path部分/list得知所要访问的页面，对其进行渲染并将结果返回给浏览器。
使用PathLocationStrategy路由策略，必须满足三个条件
（1）浏览器需要支持HTML5的history.pushState()方法，这个方法可以使RouterLink指令在跳转时即使更改了URL的path部分，也不会引起页面的刷新。
（2）在服务器上进行设置，将应用的所有URL重定向到应用的首页，这是因为该应用所生成的URL在服务器上并不存在与相对应的文件结构，如果不进行重定向，服务器将返回404错误。
（3）需要为应用设置一个base路径，Angular可以以base路径为前缀来生成和解析URL。可以在index.html页面中标签的href属性中设置，也可以通过向应用中注入APP_BASE_HREF变量来实现。
providers：[{provide:APP_BASE_HREF,useValue:'/app'}]

路由跳转

（1）指令跳转
使用RouterLink指令来完成跳转。可以被应用到任何HTML元素上，使页面跳转不需要依赖超链接。当routerLink处于激活状态时，该元素就可以获得routerLinkActive指定的css类.active。
例如


           我是谁

（2）使用代码跳转
可以使用Router.navigateByUrl()或Router.navigate()来完成。

路由参数

（1）path参数
path参数是通过解析url中的path部分来获取参数的，在定义一个配置项的path属性的时候，可以使用“/”字符来对path属性进行分段。如果一个分段以“ ：”字符开头，则URL中的该分段进行匹配的部分将作为参数传递到组件中。
angular应用从一个页面跳转到另一个新的页面，实质上是从一个配置项跳转到另一个配置项。
（2）Query参数
每个配置项可以有任意多个查询参数，
http://localhost:3000/list?limit=5
也可以通过RouterLink指令给或者跳转的方法来赋值。

this._router.navigate(['/list'],{queryParams:{limit:5}});
this._router.navigateByUrl('/list?limit=5');

子路由和附属Outlet

一、子路由
angular允许一个路由组件被嵌套到另一个路由组件中，从而建立路由的多级嵌套关系。children是用来配置子路由

const routes: Routes = [
    {
        path: '', component: DataGeneralViewComponent,
        children: [
            {path: '', redirectTo: 'currentData'},
            {
                path: 'currentData', component: DataViewComponent, data: {breadcrumb: 'aaa'},
            },
            {
                path: 'operatorData', component: DataOperatorHistoryComponent, data: {breadcrumb: 'bbb'}
            },
            {
                path: 'historyData', component: DataHistoryComponent, data: {breadcrumb: 'ccc'}
            },{
                path: 'test', component: DataTestComponent, data: {breadcrumb: 'ddd'}
            }
        ]
    }
];

二、Matrix参数

angular提供了Matrix参数，它通过在连接参数数组中插入一个对象来进行赋值。
例如

 
 三、附属Outlet
 angular允许一个路由组件包含多个Outlet，从而可以在一个路由组件中同时显示多个组件。其中主要Outlet有且仅有一个，附属Outlet可以有任意多个，各个附属Outlet通过不同的命名加以区分。每个Outlet均可以通过路由配置来指定其可以显示的组件。
 例如 
 export const rootRouterConfig: Routes = [
{path: 'detail/:id',component: DetailComponent,
 children: [
   {path: '',component: AnnotationComponent},
   {path:'album', component: AlbumComponent},
  //附属路由
   {path: 'annotation', component； AnnotationComponent，outlet:'aux'},
   {path: 'album', component； AlbumComponent，outlet:'aux'},
]}
]
 
 路由拦截 
 angular的路由拦截允许从一个配置项跳转到另一个配置项之前执行指定的逻辑，并根据执行的结果来决定是否进行跳转。
 CanActive：激活拦截
 CanActiveChild:与CanActive类似，用于控制是否允许激活子路由配置项。
 CanDeactivate：反激活拦截
 Resolve：数据预加载拦截
 CanLoad：模块加载拦截 
 模块的延迟加载 
 1.延迟加载实现 
  
 loadChildren指定了延迟加载模块的路径，#后面表示模块类名。
 2.模块预加载 
 preload设置为true，加载方式由原来的延迟加载变为预加载。
 
 3.模块加载拦截
 CanLoad
 例如： 
 @Injectable()
export class CanLoadGuard implements CanLoad{
    canLoad(route: Route){
       console.log(route.path);
       if(/*允许加载*/){
           return true;
       }else{
           return false;
       }
   }
}
在延迟加载配置项中指定CanLoad拦截服务
最后需要将CanLoad拦截服务注入到根模块中
@NgModule({
     providers: [CanLoadGuard]
})
export class AppModule{}