angular中的动态路由
1.配置动态路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
} ];
2.跳转传值
<a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a>
<a routerLink="/newscontent/{{aid}}">跳转到详情</a>
3.获取动态路由的值
import { ActivatedRoute} from '@angular/router';
constructor( private route: ActivatedRoute) { }
ngOnInit() {
console.log(this.route.params);
this.route.params.subscribe(data=>this.id=data.id);
}
动态路由的 js 跳转
1. 引入
import { Router } from '@angular/router';
2.初始化
xport class HomeComponent implements OnInit { constructor(private router: Router) {
}
ngOnInit() {
}
goNews(){
// this.router.navigate(['/news', hero.id]);
this.router.navigate(['/news']);
}
}
3.路由跳转
this.router.navigate(['/news', hero.id]);
路由 get 传值 js 跳转
1. 引入 NavigationExtras
import { Router ,NavigationExtras} from '@angular/router';
2.定义一个 goNewsContent 方法执行跳转,用 NavigationExtras 配置传参。
goNewsContent(){
let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': '123' },
fragment: 'anchor'
};
this.router.navigate(['/news'],navigationExtras);
}
3.获取 get 传值
constructor(private route: ActivatedRoute) {
console.log(this.route.queryParams);
}
angular中的动态路由的更多相关文章
- Vue.js 中的动态路由
静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...
- Angular中ui-router实现路由嵌套案例
学习 ui-router 资料整理 对于Angular内置的路由是单路由视图,ui-router可以实现路由嵌套.后面将会有一个案例概括前面所有资料整理 学习 ui-router - 管理状态 ht ...
- ASP.NET Core 3.0中使用动态控制器路由
原文:Dynamic controller routing in ASP.NET Core 3.0 作者:Filip W 译文:https://www.cnblogs.com/lwqlun/p/114 ...
- VueRouter爬坑第二篇-动态路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- Flask(5)- 动态路由
前言 前面几篇文章讲的路由路径(rule)都是固定的,就是一个路径和一个视图函数绑定,当访问这条路径时会触发相应的处理函数 这样无法处理复杂的情况,比如常见的一个课程分类下有很多个课程,那么他们的 p ...
- HCNA Routing&Switching之动态路由基本概念
前文我们了解了静态路由的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14965433.html:今天我们来聊一聊动态路由相关概念: 首先我们要清楚什 ...
- angular中路由跳转并传值四种方式
一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...
- Angular中懒加载一个模块并动态创建显示该模块下声明的组件
angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...
- YbSoftwareFactory 代码生成插件【二十四】:MVC中实现动态自定义路由
上一篇介绍了 公文流转系统 的实现,本篇介绍下MVC下动态自定义路由的实现. 在典型的CMS系统中,通常需要为某个栏目指定个友链地址,通过指定友链地址,该栏目的地址更人性化.方便记忆,也有利用于搜索引 ...
随机推荐
- Python基础——运行机理
Python解释器 从Python这门编程语言的实现上来讲,Python是一个名为解释器的软件包,包含:一个解释器 和 支持的库 解释器又有不同版本:CPython.Jython.IronPython ...
- [Docker][ansible-playbook]3 持续集成环境之分布式部署
预计阅读时间: 30分钟 本期解决痛点如下:1. 代码版本的多样性,编译环境的多样性如何解决?答案是使用docker,将不同的编译环境images统统打包到私有仓库上,根据需求进行下载,从宿主机上挂载 ...
- excel转sql代码
1. 首先一个标准的excel表格,如下: 2. 在同一行,后面一个单元格,英文输入法状态下输入以下:=CONCATENATE() =CONCATENATE("insert into tab ...
- WebApi 接口恶意请求限制
为了防止爬虫以及恶意请求,我们适当的为API增加一个请求限制 WebApiThrottle限流框架 WebApiThrottle支持自定义配置各种限流策略.可以根据不同场景配置多个不同的限制 ...
- java项目中注解使用——整理
文章:@Mapper注解的使用 地址:https://blog.csdn.net/weixin_39666581/article/details/81057385 @Mapper注解的的作用 1:为了 ...
- 【PAT-并查集-水题】L2-007-家庭房产
L2-007. 家庭房产 给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产套数. 输入格式: 输入第一行给出一个正整数N(<=1000),随后N行,每行按下 ...
- python基础--文件控制
读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...
- AfxBeginThread深入解析
看过<深入浅出MFC>书中,j.j.hou提到在创建新的线程时,最好不要直接使用CreateThread,虽然AfxBeginThread也是对CreateThread的封装,但是AfxB ...
- 【noi2019集训题1】 脑部进食 期望dp+高斯消元
题目大意:有n个点,m条有向边,每条边上有一个小写字母. 有一个人从1号点开始在这个图上随机游走,游走过程中他会按顺序记录下走过的边上的字符. 如果在某个时刻,他记录下的字符串中,存在一个子序列和S2 ...
- web+文件夹上传
一. 大文件上传基础描述: 各种WEB框架中,对于浏览器上传文件的请求,都有自己的处理对象负责对Http MultiPart协议内容进行解析,并供开发人员调用请求的表单内容. 比如: Spring 框 ...