详解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 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
潜说js对象和数组
May 25 Javascript
Js四则运算函数代码
Jul 21 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
javascript实现简易的计算器
Jan 17 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
PHP脚本数据库功能详解(上)
2006/10/09 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
深入探讨前端框架react
2015/12/09 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Django发送邮件功能实例详解
2019/09/02 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
英文留学推荐信范文
2014/01/25 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
谢师宴家长致辞
2015/07/27 职场文书
村主任当选感言
2015/08/01 职场文书
Python图像处理之图像拼接
2021/04/28 Python
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
配置Kubernetes外网访问集群
2022/03/31 Servers