angular路由学习笔记
文章目录
标签routerLink路由传递参数
url中get传值
// queryParams 传递的是一个对象
<a [routerLink]="[ '/endpage/']" [queryParams]="{name:'huangbiao',age:30}">endpage</a>
定义路由
const routes: Routes = [
{ path: 'endpage', component: EndPageComponent }
];
url的地址是 http://localhost:4200/endpage?name=huangbiao&age=30
获取参数
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router'; @Component({
selector: 'app-end-page',
templateUrl: './end-page.component.html',
styleUrls: ['./end-page.component.scss']
})
export class EndPageComponent implements OnInit {
constructor(public route:ActivatedRoute) { } ngOnInit() {
console.dir(this.route);
debugger
this.route.params.subscribe((data)=>{
console.log(data); // 打印的是一个对象,key为name和age
});
} }
获取参数要依赖注入 route:ActivatedRoute
对象
配置动态路由
// 第一个参数对应路由的name,第二个参数对应路由的age
<a [routerLink]="[ '/endpage/', 'huangbiao','30' ]">endpage</a>
定义路由
const routes: Routes = [
{ path: 'endpage/:name/:age', component: EndPageComponent }
];
url地址是 http://localhost:4200/endpage/huangbiao/30
获取参数
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router'; @Component({
selector: 'app-end-page',
templateUrl: './end-page.component.html',
styleUrls: ['./end-page.component.scss']
})
export class EndPageComponent implements OnInit {
constructor(public route:ActivatedRoute) { } ngOnInit() {
console.dir(this.route);
debugger
this.route.params.subscribe((data)=>{
console.log(data); // 打印的是一个对象,key为name和age
});
} }
API js路由跳转
配置动态路由
this.router.navigate(['/newscontent/','1243'])
//this.router.navigate(['/home']);
如果是动态路由,则路由后面的/
是不能少的
定义路由
const routes: Routes = [
{ path: 'endpage', component: EndPageComponent }
];
url地址是 http://localhost:4200/endpage/huangbiao/30
获取参数
import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router'; @Component({
selector: 'app-end-page',
templateUrl: './end-page.component.html',
styleUrls: ['./end-page.component.scss']
})
export class EndPageComponent implements OnInit {
constructor(public router:Router) { } ngOnInit() {
console.dir(this.route);
debugger
this.route.params.subscribe((data)=>{
console.log(data); // 打印的是一个对象
});
} }
get传值
this.router.navigate(['/news'],{
queryParams:{
aid:123
}
});
定义路由
const routes: Routes = [
{ path: 'endpage', component: EndPageComponent }
];
url地址是 http://localhost:4200/endpage/huangbiao/30
获取参数
import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router'; @Component({
selector: 'app-end-page',
templateUrl: './end-page.component.html',
styleUrls: ['./end-page.component.scss']
})
export class EndPageComponent implements OnInit {
constructor(public router:Router) { } ngOnInit() {
console.dir(this.route);
debugger
this.route.params.subscribe((data)=>{
console.log(data); // 打印的是一个对象
});
} }
1.以根路由跳转/login
this.router.navigate(['login']);
2.设置relativeTo相对当前路由跳转,route是ActivatedRoute的实例,使用需要导入ActivatedRoute
this.router.navigate(['login', 1],{relativeTo: route});
3.路由中传参数 /login?name=1
this.router.navigate(['login', 1],{ queryParams: { name: 1 } });
4.preserveQueryParams默认值为false,设为true,保留之前路由中的查询参数/login?name=1 to /home?name=1
this.router.navigate(['home'], { preserveQueryParams: true });
5.路由中锚点跳转 /home#top
this.router.navigate(['home'],{ fragment: 'top' });
6.preserveFragment默认为false,设为true,保留之前路由中的锚点/home#top to /role#top
this.router.navigate(['/role'], { preserveFragment: true });
7.skipLocationChange默认为false,设为true,路由跳转时浏览器中的url会保持不变,但是传入的参数依然有效
this.router.navigate(['/home'], { skipLocationChange: true });
8.replaceUrl默认为true,设为false,路由不会进行跳转
this.router.navigate(['/home'], { replaceUrl: true });
angular路由学习笔记的更多相关文章
- Angular快速学习笔记(2) -- 架构
0. angular 与angular js angular 1.0 google改名为Angular js 新版本的,2.0以上的,继续叫angular,但是除了名字还叫angular,已经是一个全 ...
- Angular 快速学习笔记(1) -- 官方示例要点
创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 <h2>{{ hero.name | u ...
- Angular【学习笔记】
1.angular入门网站 感谢@菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 学习笔记:
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...
- angular.js学习笔记--概念总结
好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...
- Angular2之路由学习笔记
目前工作中项目的主要技术栈是Angular2 在这里简单记录一下遇到的问题以及解决方案. 这篇笔记主要记录Angular2 的路由. 官方文档链接:https://angular.cn/docs/ts ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js学习笔记(三)
一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...
- angular.js学习笔记(二)
1.安装core ,shared模块 ng g m core ng g m shared 2.在shared中导入core模块 core模块只加载一次所以将公共组件放到core中 3.创建公共组 ...
随机推荐
- windows cmd命令 mkdir生成多个文件bug问题
[问题现象] 有这样一个bat脚本,目的是为了根据时间创建文件夹 执行后却发现生产的文件夹有两个,名字被分开了,很是纳闷,一度以为自己哪里写错了 [问题原因] 经过查阅资料,一点一点的定位.发现是因为 ...
- Technical support website
Technical support:Please leave a message if you have any questions or suggestions. email: swvrwafet@ ...
- js对输入文字个数的限制...
发表留言或者微博的时候,对输入文字个数的限制,下面分两种情况,每种分别介绍两种实现方式: 第一种:一个汉字算一位,两个字母或符号算一位. 通过ASCII编码来判断 textarea.onkeyup = ...
- Luogu P4161 [SCOI2009]游戏 数论+DP
ywy神犇太巨辣!!一下就明白了!! 题意:求$lcm(a_1,a_2,...,a_k)$的种类,其中$\Sigma\space a_i <=n$,$a_i$相当于环长 此处的$DP$,相当于是 ...
- Codeforces Round #129 (Div. 2) C
Description The Little Elephant very much loves sums on intervals. This time he has a pair of intege ...
- TOMCAT调优内容
使用NIO EndPoint connector线程数, 最大并发数 最大请求数 阻塞队列大小 jvm Xms Xmm maxMetaspace gc收集器 应用app逻辑优化:这个才是重点
- set<int> 的用法
博客学习:https://blog.csdn.net/yas12345678/article/details/52601454 介绍一下 *max_element(a,a+n) 求取数组最大的元素 ...
- eslint规则 中文备注
{ "ecmaFeatures": {}, "rules": { "no-alert": 0,//禁止使用alert confirm pro ...
- Git忽略提交规则
Git忽略提交规则 转自:https://www.cnblogs.com/kevingrace/p/5690241.html 在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等 ...
- form中onsubmit的使用
form 中的onsubmit在点submit按钮时被触发,如果return false;则结果不会被提交到action中去(也就是提交动作不会发生),如果不返回或者返回true,则执行提交动作.(& ...