angualr4 路由 总结笔记
使用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 路由 总结笔记的更多相关文章
- Angular2之路由学习笔记
目前工作中项目的主要技术栈是Angular2 在这里简单记录一下遇到的问题以及解决方案. 这篇笔记主要记录Angular2 的路由. 官方文档链接:https://angular.cn/docs/ts ...
- vue2.0 路由学习笔记
昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...
- CCIE-交换路由复习笔记
交换 考点: 1.trunk link(基础) 2.vtp 3.vlan 4.stp rstp mstp 5.hsrp vrrp glbp 6.ec Trunk link: 修改封装模式 802.1q ...
- 一个C#程序员学习微信小程序路由的笔记
路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...
- Vue路由学习笔记
Vue路由大致分为6个步骤: 1.引用vue-router <script src="js/vue-router.js"></script> 2.安装插件 ...
- Linux 路由 学习笔记 之一 相关的数据结构
http://blog.csdn.net/lickylin/article/details/38326719 从现在开始学习路由相关的代码,在分析代码之前, 我们还是先分析数据结构,把数据结构之间的关 ...
- angular4路由设置笔记
场景说明:angular4开发的一个后台项目 一.可以使用angular-cli创建一个带路由的项目,ng new 项目名称 --routing 会多创建一个app-routing.module.ts ...
- angular路由学习笔记
文章目录 标签routerLink路由传递参数 url中get传值 定义路由 获取参数 配置动态路由 定义路由 获取参数 API js路由跳转 配置动态路由 定义路由 获取参数 get传值 定义路由 ...
- vue.js路由学习笔记二
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)ABCD
A. Arpa and a research in Mexican wave time limit per test 1 second memory limit per test 256 megaby ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
- 802.1Q VLAN技术原理
文章出处:http://hi.baidu.com/x278384/item/d56b0edfd4f56a4eddf9be79 在数据通信和宽带接入设备里,只要涉及到二层技术的,就会遇到VLAN.而且, ...
- 纠错:基于FPGA串口发送彩色图片数据至VGA显示
今天这篇文章是要修改之前的一个错误,前面我写过一篇基于FPGA的串口发送图片数据至VGA显示的文章,最后是显示成功了,但是显示的效果图,看起来确实灰度图,当时我默认我使用的MATLAB代码将图片数据转 ...
- SQL 2008 外网访问说明
1. 安装SQL2008 . 安装SQL2008之前,必须预先安装.NET Framework 3.5,和Windows Installer 4.5 Redistributable. 可能产生错误: ...
- Scala 运算符和集合转换操作示例
Scala是数据挖掘算法领域最有力的编程语言之一,语言本身是面向函数,这也符合了数据挖掘算法的常用场景:在原始数据集上应用一系列的变换,语言本身也对集合操作提供了众多强大的函数,本文将以List类型为 ...
- ABAP 内表数据 与 Json串 相互转换
内表: A B C IMINGZHA HAIMINGZ AIMINGZH 1 2 3 4 5 6 Json串: [{a: "IMINGZHA", b: "HAIMIN ...
- win10 UWP 圆形等待
看到一个圆形好像微软ProgressRing 我们可以用自定义控件 按ctrl+shift+a 用户控件 我们可以用Rectangle做圆形边 只要Rectangle RadiusX>0圆角 因 ...
- 【持续更新】.Net 开发中给自己埋下的坑!
1.文件“XXX”正在由另一进程使用,因此该进程无法访问此文件. 原因剖析:文件在主线程操作,在子线程中读写操作文件,刚开始没有意识到程序的问题所在,总是在FileStream中报错,google后常 ...
- DOS和windows的区别?
2017-09-25 19:18:03 本质:都是微软公司的操作系统,某种从程度上说windows是dos的后续操作系统版本.只是windows相比dos有质的飞跃.dos只支持命令操作,windo ...