详解Angular4 路由设置相关


Posted in Javascript onAugust 26, 2017

1.路由相关配置

路由类设置

/*路由基本模型*/

/*导入RouterModule,Routes类型*/
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from "./login/login.component";

/*定义路由const表示不可改变*/
const routers: Routes = [
 /*
  path:字符串,表示默认登入,
  path为路径 /login component:组件
  component:组件
  pathMatch:为字符串默认为前缀匹配 "prefix"; "full" 为完全匹配。
  redirectTo:指向为路径,既path
  outlet:字符串,路由目标,面对多个路由的情况
  children:Routes 子路由相关
  */
 { path: '', component: LoginComponent },
 // path:路径 /detail/1 :id代表参数相关
 { path: 'detail/:id', component: LoginComponent },
 // 懒加载子模块, 子模块需要配置路由设置启动子组件,如果这样设置了路由,需要在子模块中再定义路由
 { path: 'other', loadChildren:"./demo/demo.module#demoModule" },
 // 重定向,路径为** 表示不能识别的路径信息,重定向到相关路径下
 { path: '**', pathMatch: 'full', redirectTo: '' }
];

/*将路由设置导出,子模块中的路由使用 forChild 而不是 forRoot*/
export const appRouter = RouterModule.forRoot(routers);

ngModule设置

@NgModule({
 declarations: [
 ......
 ],
 imports: [
 ......
  appRouter
 ]
})

组件模板设置

<router-outlet></router-outlet>

2.多路由处理

{ path: 'news', outlet: 'let1', component: NewsComponent },
{ path: 'news', outlet: 'let2', component: News2Cmponent },
//模板中
<router-outlet name="let1"></router-outlet>
<router-outlet name="let2"></router-outlet>

访问 /news/ 时同时加载 NewsComponent News2Cmponent 两个组件

3.路有链接以及组件中调用路由方法使用

<a routerLink="/detail/1" routerLinkActive="active">detail</a>
<a [routerLink]="['/detail', news.id]">{{news.title}}</a>
<a [routerLink]="[{ outlets: { let2: ['news'] } }]">Contact</a>

routerLinkActive="active" 即在本路由激活时添加样式 .active

或者:

this.router.navigate(['/detail', this.news.id])
this.router.navigate([{ outlets: { let2: null }}]);

其中:navigateByUrl 方法指向完整的绝对路径

4.路由守卫(适用于后台管理等需要登录才能使用的模块)

import { Injectable }   from '@angular/core';
import { CanActivate }  from '@angular/router';

@Injectable()
export class AuthService implements CanActivate {
 canActivate() {
  // 这里判断登录状态, 返回 true 或 false
  return true;
 }
}

在路由配置中的设置

{ path: '', component: LoginComponent, canActivate:[LoginComponent] },

5.退出守卫(适合于编辑器修改后的保存提示等场景)

import { Injectable }   from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot }  from '@angular/router';

// CanDeactivateComponent 是定义的接口,见下段代码
import { CanDeactivateComponent } from './can-deactivate.omponent';

@Injectable()
export class DeacService implements CanDeactivate<CanDeactivateComponent> {
 canDeactivate(
  canDeactivateComponent: CanDeactivateComponent,
  activatedRouteSnapshot: ActivatedRouteSnapshot,
  routerStateSnapshot: RouterStateSnapshot
 ) {
  // 目标路由和当前路由
  console.log(activatedRouteSnapshot);
  console.log(routerStateSnapshot);

  // 判断并返回
  return canDeactivateComponent.canDeactivate ? canDeactivateComponent.canDeactivate() : true

 }
}

..

// 接口组件, 返回 true 或 false 如表单发生改变则调用对话框服务
export interface CanDeactivateComponent {
 canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

路由配置

{
 path: ...,
 canDeactivate: [DeacService],
  component: ...
}

模块中添加服务

providers: [
 DeactivateGuardService
]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
使用ECharts实现状态区间图
Oct 25 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
浅谈Angular路由守卫
Aug 26 #Javascript
javascript实现文字无缝滚动效果
Aug 26 #Javascript
node实现定时发送邮件的示例代码
Aug 26 #Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
get  post jsonp三种数据交互形式实例详解
Aug 25 #Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 #Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python类型转换的魔术方法详解
2020/12/23 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
我的求职计划书
2014/01/10 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
安全生产责任书范本
2014/04/15 职场文书
建议书的格式
2014/05/12 职场文书
汽车广告策划方案
2014/05/31 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
高三英语教学计划
2015/01/23 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书