angular4学习记录 -- 路由

FullStackDeveloper 发布于2019-08-21 16:41 / 2277人阅读

摘要：通过设置路由参数，控制辅助路由的插座是否显示组件内容。具体设置路由守卫在设置路由守卫时需先做下面两步一在中添加二在中添加需要守卫的路由的或者，前两个是数组形式，是对象形式。在路由激活之前获取路由数据在文件中实现接口

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]

路由事件

事件	description
NavigationStart	事件开始时触发
RoutesRecognized	在解析完URL，并识别出了相应的路由时触发
RouteConfigLoadStart	在Router对一个路由配置进行惰性加载之前触发
RouteConfigLoadEnd	在Router被惰性加之后触发
NavigationEnd	导航成功之后触发
NavigationCancel	导航被取消之后触发。可能是因为导航期间某个路由守卫返回了false
NavigationError	在导航发生意外的错误时触发

子路由

语法：

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

辅助路由

在页面中设置路由插座：

多带带开发一个新组件，只显示在新定义的插座上。

通过设置路由参数，控制辅助路由的插座是否显示组件内容。

具体设置：{ path: "consult", component: ConsultComponent, outlet: "aux"}

路由守卫

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

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

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

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

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

 canDeactivate(component: StockComponent){
     if(component.isFocus()){
       return true;
     }else{
       return window.confirm("关注一下哦。！")
     }
 }

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88607.html

Angular2 VS Angular4 深度对比：特性、性能

摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

孙淑建 2019-08-20 18:37 评论0 收藏0
angular4学习记录 -- 组件通讯、生命周期

摘要：每完成被投影组件内容发生变化时调用。每次做完组件视图和子组件视图的变更检测之后调用。组件销毁时调用，主要用于内存回收。策略策略是当组件的输入属性发生变更时才会检查当前组件及其子组件。 angular4 组件通讯、生命周期主要通讯形式父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件父组件通过局部变量获取子组件的引用父组件使用@ViewChild获取子组件的引用两个不...

shadajin 2019-08-21 16:45 评论0 收藏0
使用angular4.0来搭建一个博客类的项目

摘要：前言也就是的最新版本最近也是大红大紫的公司项目主管推上学习日程自己也就抽时间写了一个小的博客类的意在于去看一下最新的特性和的语法由于刚接触和所以有点小糙望见谅项目原址我是项目地址我是地址项目简介整个项目是使用脚手架搭建的项目目录结构项目功前言 angular也就是angular.js的最新版本,最近也是大红大紫的公司项目主管推上学习日程,自己也就抽时间写了一个小的博客类的demo,意...

BakerJ 2019-08-20 17:39 评论0 收藏0
使用angular4.0来搭建一个博客类的项目

摘要：前言也就是的最新版本最近也是大红大紫的公司项目主管推上学习日程自己也就抽时间写了一个小的博客类的意在于去看一下最新的特性和的语法由于刚接触和所以有点小糙望见谅项目原址我是项目地址我是地址项目简介整个项目是使用脚手架搭建的项目目录结构项目功前言 angular也就是angular.js的最新版本,最近也是大红大紫的公司项目主管推上学习日程,自己也就抽时间写了一个小的博客类的demo,意...

张宪坤 2019-08-29 12:52 评论0 收藏0
使用angular4.0来搭建一个博客类的项目

摘要：前言也就是的最新版本最近也是大红大紫的公司项目主管推上学习日程自己也就抽时间写了一个小的博客类的意在于去看一下最新的特性和的语法由于刚接触和所以有点小糙望见谅项目原址我是项目地址我是地址项目简介整个项目是使用脚手架搭建的项目目录结构项目功前言 angular也就是angular.js的最新版本,最近也是大红大紫的公司项目主管推上学习日程,自己也就抽时间写了一个小的博客类的demo,意...

littleGrow 2019-08-01 17:04 评论0 收藏0