Angular4 路由

路由时传递数据

1.在查询参数中传递数据

/product?id=1&name=2 => ActivateRoute.queryParams[id]

2.在路由路径中传递数据

{path:/product/:id} => /product/1 => ActivateRoute.params[id]

3.在路由配置中传递数据

{path:product,component:ProductComponent,data:[{isProd:true}] => ActivatedRoute.data[0][isProd]

路由事件

子路由

语法：

const routes: Router = [
    { path: 'home',component: HomeComponent },{ path: 'others',component: OthersComponent,children: [
            path: '',component: XxxComponent,path: 'yyy',component: YyyComponent
        ]
    },]

辅助路由

1. 在页面中设置路由插座：<router-outlet name="aux"></router-outlet>
2. 单独开发一个新组件，只显示在新定义的插座上。
3. 通过设置路由参数，控制辅助路由的插座是否显示组件内容。
   具体设置：{ path: 'consult',component: ConsultComponent,outlet: 'aux'}

路由守卫

在设置路由守卫时需先做下面两步：

一、在module中添加providers
二、在routing.module中添加需要守卫的路由的canActivate 、 canDeactivate 或者 Resolve，前两个是数组形式，Resolve是对象形式。

1. CanActivate：处理导航到某路由的情况
   在guard文件中实现CanActivate接口：

canActivate() {
        var hasPermission:boolean = Math.random() < 0.5;
        if(!hasPermission) {
          console.log("用户无权访问次股票详情")
        }
        return hasPermission;
    }

1. CanDeactivate：处理从当前路由离开的情况
   在guard文件中实现CanDeActivate接口：

   canDeactivate(component: StockComponent){
           if(component.isFocus()){

   return true;

   }else{

   return window.confirm("关注一下哦。！")

   }
       }

2. Resolve：在路由激活之前获取路由数据
   在guard文件中实现Resolve接口

resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
            let id = route.params["id"];
            if(id == 1){
              return new Stock(1,"IBM");
            }else {
              this.router.navigate(['/home']);
              return undefined;
            }
       }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!