使用cli命令创建根路由模块 ng g cl app.router 或自己建一个路由配置文件 如:app/app.router.ts

// app/app.router.ts
// 将文件修改为 import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [
// 以后在这里改动配置
{ path: '**', pathMatch: 'full', redirectTo: '' }
];
// 将路由配置导出为 appRouting 以供调用, 子模块中的路由使用 forChild 而不是 forRoot
export const appRouting = RouterModule.forRoot(routes);

在根模块中引入路由, 为特性模块定义的路由在其模块中引入

// app/app.module.ts
import { appRouting } from "./router/router.module"
// @NgModule({
// imports: [ ... ,
appRouting
// ...

路由配置

const routes: Routes = [
// path:路径 /news component:组件
{ path: 'news', component: Newsomponent },
// path:路径 /detail/1 component:组件
{ path: 'detail/:id', component: DetailComponent },
// 懒加载子模块, 子模块需要配置路由设置启动子组件
{ path: 'other', loadChildren:"./other/other.module#otherModule" },
// 重定向
{ path: '**', pathMatch: 'full', redirectTo: '' }
];
  • pathMatch?: string; 默认为前缀匹配 "prefix"; "full" 为完全匹配

  • outlet?: string; 路由目标

  • children?: Routes; 子路由的规则

加载路由

在根组件或当前组件的模板中

<router-outlet></router-outlet>

多个路由区域

  { 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 两个组件

链接及访问

<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

import { Router } from '@angular/router';
// ...
constructor(private router: Router) {} // ... this.router.navigate(['/detail', this.news.id])
this.router.navigate([{ outlets: { let2: null }}]);

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

路由参数

const appRoutes: Routes =  [
....
{path: 'product/:id',canActivate: [AuthService], component: ProductComponent},
....
];
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import 'rxjs/add/operator/switchMap'; @Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit { public id: number; constructor(private route: ActivatedRoute) { } ngOnInit() {
this.route.params.subscribe((params) => this.id = params.id);
console.log(this.id)
} }

路由守卫

适用于后台管理等需要登录才能使用的模块

创建一个认证服务

// app/auth.service.ts

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

添加或修改路由配置

// app/app.router.ts

// 增加 CanActivate
import { CanActivate ... } from '@angular/router'; // 配置中增加 canActivate 如:
{ path: 'admin', canActivate:[AuthService] ... }

退出守卫

适合于编辑器修改后的保存提示等场景

// app/deac.service.ts

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 }
}
// can-deactivate.omponent.ts

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

路由配置

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

模块中添加服务

providers: [
DeactivateGuardService
]

angualr4 路由 总结笔记的更多相关文章

  1. Angular2之路由学习笔记

    目前工作中项目的主要技术栈是Angular2 在这里简单记录一下遇到的问题以及解决方案. 这篇笔记主要记录Angular2 的路由. 官方文档链接:https://angular.cn/docs/ts ...

  2. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

  3. CCIE-交换路由复习笔记

    交换 考点: 1.trunk link(基础) 2.vtp 3.vlan 4.stp rstp mstp 5.hsrp vrrp glbp 6.ec Trunk link: 修改封装模式 802.1q ...

  4. 一个C#程序员学习微信小程序路由的笔记

    路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...

  5. Vue路由学习笔记

    Vue路由大致分为6个步骤: 1.引用vue-router <script src="js/vue-router.js"></script> 2.安装插件 ...

  6. Linux 路由 学习笔记 之一 相关的数据结构

    http://blog.csdn.net/lickylin/article/details/38326719 从现在开始学习路由相关的代码,在分析代码之前, 我们还是先分析数据结构,把数据结构之间的关 ...

  7. angular4路由设置笔记

    场景说明:angular4开发的一个后台项目 一.可以使用angular-cli创建一个带路由的项目,ng new 项目名称 --routing 会多创建一个app-routing.module.ts ...

  8. angular路由学习笔记

    文章目录 标签routerLink路由传递参数 url中get传值 定义路由 获取参数 配置动态路由 定义路由 获取参数 API js路由跳转 配置动态路由 定义路由 获取参数 get传值 定义路由 ...

  9. vue.js路由学习笔记二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. C# readonly

    当某个字段是引用类型,并且该字段被标记为readonly时,不可改变的是引用,而非字段引用的对象,例如:

  2. 【转】wireshark基本用法及过虑规则

    Wireshark 基本语法,基本使用方法,及包过虑规则: 1.过滤IP,如来源IP或者目标IP等于某个IP   例子: ip.src eq 192.168.1.107 or ip.dst eq 19 ...

  3. 浅析php curl_multi_*系列函数进行批量http请求

    何起: 一系列 数量很大 数据不热 还希望被蜘蛛大量抓取的页面,在蜘蛛抓取高峰时,响应时间会被拉得很高. 前人做了这样一个事儿:页面分3块,用3个内部接口提供,入口文件用curl_multi_*系列函 ...

  4. WPF中的imagesource 和内存图片的处理

    [转载]ImageSource的使用心得 很多时候,我们会使用图片来装饰UI,比如作为控件背景等. 而这些图片可以分为两种形式,即存在于本地文件系统中的图片和存在于内存中的图片 对于这两种形式的图片, ...

  5. mySQL、mariaDB、noSQL、SQL server、redis之间是什么关系?

    1.首先,从数据库类型上分类,mySQL.mariaDB.SQL server这3种属于关系型数据库. noSQL属于非关系型数据库,被视为数据库革命者. redis成为内存缓存数据库,而前面的两种类 ...

  6. 算法-找出与目标数字相同的digit组成的整数中比该数字大的数集中的最小数字

    题目: 给出1个正整数,找到用与这个数字相同的digit组成的整数中比这个数字大的数集中的最小数字.比如:12352874 的结果是 12354278 分析: 这道题目的考虑目标是数组的查找与排序. ...

  7. 【转载】小tips: PC端传统网页试试使用Zepto.js进行开发

    Zepto.js设计之初专为移动端,不对一些古董浏览器支持.所以,尺寸很小,压缩后20K多一点,但是,jQuery压缩后,3.*版本要80多K,1.*版本则要90多K,4倍差距. 由于每个页面都会使用 ...

  8. php学习资料

    http://medoo.in/轻量级 PHP 连接数据库的类库 http://www.thinkphp.cn/国产 PHP 万金油框架,快速做项目,效率一般,BUG 众多

  9. 关于celery django django-celery版的搭配的报错问题及解决方法

    G:\python3_django\DFpro\mypro (win)(py3_django) λ python manage.py celery worker --loglevel=infoTrac ...

  10. eclipse创建一个文件夹

    如何给eclipse创建一个文件夹,便于项目的管理:有时我们的eclipse中会有很多项目的,有的是公司的如Project1,Project2,Project3....还有的呢, 也可能是自己平时做的 ...