Angular配置路由以及动态路由取值传值跳转
Angular配置路由
1、找到 app-routing.module.ts 配置路由
引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
配置路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
找到 app.component.html 根组件模板,配置 router-outlet 显示动态加载的路由
<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
Angular routerLinkActive设置routerLink 默认选中路由
<h1>
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>
动态路由传值与取值
跳转传值
<a [routerLink]="[ '/newscontent/',aid]">跳转到详情</a>
<a routerLink="/newscontent/{{aid}}">跳转到详情</a>
获取动态路由的值
import { ActivatedRoute} from '@angular/router'; constructor( private route: ActivatedRoute) {
}
public id: Number;
ngOnInit() {
console.log(this.route.params);
this.route.params.subscribe(data=>this.id=data.id);
}
动态路由的 js 跳转
import { Router } from '@angular/router export class HomeComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
}
goNews(){
// this.router.navigate(['/newscontent', hero.id]);
this.router.navigate(['/newscontent']);
}
}
Angular配置路由以及动态路由取值传值跳转的更多相关文章
- 使用Gateway配置路由以及动态路由
1. 新建module cloud-gateway-gateway9527 2. pom.xml <!--注意不需要web模块依赖,否则报错--> <?xml version=&qu ...
- IP路由__动态路由
1.使用协议来查找网络并更新路由表的配置,就是动态路由.它比使用静态或默认路由方便,但它需要一定的路由器CPU处理时间和网络链接带宽.路由协议定义了路由器与相邻路由器通信时所使用的一组规则. 在互联网 ...
- CCNA - Part12 - 路由协议 (1) - 静态路由,动态路由 RIP
路由器 在之前关于路由器的介绍中,我们知道它是网络互联的核心设备,用于连接不同的网络,在网络之间转发 IP 数据报.对于路由器来说,路由表是其内部最为重要的构成组件.当路由器需要转发数据时,就会按照路 ...
- vue根据后端菜单自动生成路由(动态路由)
vue根据后端菜单自动生成路由(动态路由) router.js import Vue from 'vue' import Router from 'vue-router' import store f ...
- nodejs之express路由与动态路由
1.快速创建express项目步骤 /** * 1.cd 到项目里面 * 2.npm init --yes 创建package.json文件 * 3.安装express * npm install e ...
- SpringCloud Stream生产者配置RabbitMq的动态路由键
在写这个文章前不得不吐槽目前国内一些blog的文章,尽是些复制粘贴的文章,提到点上但没任何的深入和例子.......... 经过测试下来总结一下RabbitMQ的Exchange的特性: 1.dire ...
- 网络工程实训_4RIP路由(动态路由)
实验4:RIP路由.包括RIPv1:RIPv2 动态路由协议包括距离向量路由协议和链路状态路由协议.RIP(Routing Information Protocol,路由信息协议)是使用最广泛的距离向 ...
- Reactjs之静态路由、动态路由以及Get传值以及获取
1.新增知识点 /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm i ...
- Express全系列教程之(二):Express的路由以及动态路由
一.Express路由简介 路由表示应用程序端点 (URI) 的定义以及响应客户端请求的方式.它包含一个请求方时(methods).路径(path)和路由匹配时的函数(callback); app.m ...
随机推荐
- 【Tensorflow】tf.nn.depthwise_conv2d如何实现深度卷积?
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/mao_xiao_feng/article/ ...
- Fabric.js canvas 图形库
1.github地址: https://github.com/fabricjs/fabric.js 2.简述 Fabric.js将canvas的编程变得简单.同时在canvas上添加了交互.交互包括: ...
- 布局优化: <include />、<merge /> 、<ViewStub /> 标签的使用
在布局优化中,Androi的官方提到了这三种布局<include />.<merge />.<ViewStub />,并介绍了这三种布局各有的优势,下面也是简单说一 ...
- ContextLoadListener & DispatcherServlet 加载顺序以及加载过程
org.springframework.web.context.ContextLoaderListener 1org.springframework.web.servlet.DispatcherSer ...
- CentOS 7镜像下载
官网下载链接:http://isoredirect.centos.org/centos/7/isos/x86_64/ step1: 进入下载页,选择阿里云站点进行下载 Actual Country ...
- js知识体系
- ISO/IEC 9899:2011 条款1——范围
1. 范围 1.本国际标准指定了C编程语言的形式并建立了对用C编程语言进行编写程序的诠释.[注:国际标准的设计是用于提升在多种数据处理系统中的C程序的可移植性.其目的在于能够被实现者与程序员所使用.] ...
- Spring cloud微服务安全实战-7-5配置grafana图表及报警
先过一下grafana的配置文件 grafana的配置文件. 右键服务的地址.发信人 账号 和面等 配置要连到prometheus上. 登陆的密码是多少,第二行是不允许用户注册. dashboard. ...
- Spring cloud微服务安全实战-7-3prometheus环境搭建
Prmetheus 主要用来做来Metrics的监控和报警,这张图是官方的架构图. 这是他的核心 它的作用是根据我们的配置去完成数据的采集.服务的发现,以及数据的存储. 这是服务的发现,通过Servi ...
- [译]使用BeautifulSoup和Python从网页中提取文本
如果您要花时间浏览网页,您可能遇到的一项任务就是从HTML中删除可见的文本内容. 如果您使用的是Python,我们可以使用BeautifulSoup来完成此任务. 设置提取 首先,我们需要获取一些HT ...