2.6 angular-路由（Route）

1.single page application(单页应用)：主页面只加载一次，不在刷新，只是改变页面上部分内容的应用。

2.Route作用：angular就是一个单页应用，而路由的功能就是来实现在不改变主页的情况下，实现页面局部内容的替换，其原理就是改变页面的视图状态，例如：主页面为商品列表状态，而商品的详情页，就是页面的详情状态。

3.视图状态：spa可以理解为视图状态的集合。

4.Route相关对象： ng new route --routing

    

名称	简介
Routes	路由配置，保存着那个URL对应展示那个组件，以及在哪个RouterOutlet中展示组件
RouterOutlet	在Html中标记路由内容呈现位置的占位符指令
Router	f负者在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由
RouterLink	在Html中声明路由导航用的指令
ActivatedRoute	d当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等。

5.Routes组成：path/user,componentA

        

        

6.路由路通配符，实现页面不存在提示页面,路由通配符应放在后面

        {path:'**', component: Code404Component}

7.路由传递参数：

        路由传递参数有3种方式：

        方式1：在查询参数中传递参数（在html或者控制器时写路径跳转时传参数）：

            /product?id=1&name=2     获取参数：ActivatedRoute.queryParams[id]

        方式2：在Routes定义路由路径时定义参数

            定义路径：Routes = [ { path : 'product' ，component: ProductComponent} ]

            跳转路径：/product/1,  获取时  ActivatedRoute.params[id]

        方式3：在路由配置中，利用data[isProduct:true] ，传递参数

            Routes = [ { path: 'product', ProductComponent, data[ { isProduct: true } ] } ]

            获取值：ActivatedRoute.data[0][isProduct]

8.参数快照snapshot,参数订阅：如果有可能路由跳转到自己时，就选择参数订阅获取参数

            参数快照：this.productId = this.routerInfo.snapshot.params[id];

            参数订阅：this.productId = this.routerInfo.subscribe((params: Params) => this.productId = params["id"]);

9.重定向路由：在访问一个特定地址时，重定向另外一个地址 ，用途就是将一个地址指向另外一个地址

        Routes = [ { path:'', redirectTo: '/home' , pathMatch}, { path:'home' , componnent: HomeComponent} ]    

10.子路由：

    { path: '',component: productComponent,

        children:[

                { path:'', component: XxxComponent },

                { path:'/yyy', component: YyyyComponent}

        ]

    }       

11.辅助路由：

    <router-outlet></router-outlet>   --主插座

    <router-outlet name="uax"></router-loutlet>  辅助插座

    { path:'xxx', component: XxxxComponent,outlet:'aux' }

    { path:'yyy', component: YyyyComponent,outlet:'aux' }

    <a [routerLink]="[ {outlets:{primary: 'home', aux:'xxx'}}]">Xxxx</a> --primary可以指定主路由

    <a [routerLink]="['{outlets:{aux:'yyy'}}]">Xxxx</a>

12.路由守卫：

    只有当用户已经登陆并拥有某些权限时才能进入某些路由。

    一个路由由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才能导航到下一个路由

    当用户未执行保存操作而试图离开当前导航时提醒用户。

    CanActivate: 处理导航到某路由的情况；

         定义isLogin.ts类并实现CanActivate, 在路由中定义路由守卫，CanActivate:[IsLogin],在NgModule中定义providers:[IsLogin]

    CanDeactivte:处理当前路由离开的情况；

        同CanActivate，但是在实现CanDeactivte<指定需要守卫的路由>

    Resolve：在路由激活之前获取路由数据。

12.Route配置

    const routeConfig = [{ path: '', component: HomeComponent },{path: 'product/:productTitle', component: ProductDetailComponent}]

        imports: [RouterMoudle.forRoot(routeConfig)]    //主路由