Angular route传参

从 router-link-page1 跳转 router-link-page2 和 router-link-page3

通过自定义路由

设置router-link-page2的路由后有3个参数,parameter,parameter2,parameter3

{path: 'router-link-page2/:parameter/:parameter2/:parameter3', component: RouterLinkPage2Component}

跳转router-link-page2

<a [routerLink]="['/router-link-page2', parameter,parameter2,parameter3]">前往Page2</a>

获得参数，注意这里是params

import { ActivatedRoute } from '@angular/router';constructor(private _activatedroute:ActivatedRoute
) { }ngOnInit() {this.parameter=this._activatedroute.snapshot.params['parameter'];this.parameter2=this._activatedroute.snapshot.params['parameter2'];this.parameter3=this._activatedroute.snapshot.params['parameter3'];
}

通过queryParams

跳转router-link-page3
在queryParams放入一个对象，里面有个属性page3Parameter

<a [routerLink]="['/router-link-page3']" [queryParams]="{page3Parameter:page3Parameter | json }">前往Page3</a>

获得参数，注意这里是queryParams

this.page3Parameter=this._activatedroute.snapshot.queryParams['page3Parameter'];

示例代码

参考资料

Angular : Passing Parameters to Route
Angular - Passing object to @Input parameter with routerlink
The Angular 6|7 Router: Handling Route Parameters with Snapshot and Observables (ParamMap)

转载于:https://www.cnblogs.com/Lulus/p/10662963.html

Angular route传参相关推荐

angular 路由传参
cart.component.ts import { Component, OnInit } from '@angular/core'; import {Router} from '@angular/ ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）
app.component.html <app-in-out [in]='"传输进入"' (out)="out($event)" ></app ...
Angular父子组件通过服务传参
今天在使用ngx-translate做多语言的时候遇到了一个问题,需要在登录页面点击按钮,然后调用父组件中的一个方法. 一开始想到了@input和@output,然而由于并不是单纯的父子组件关系,而是 ...
ajax 与route的区别,浅析vue-router jquery和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别. 1.jquery方式传参和接收参数传参: this.$router.push({ path ...
id vue2路由传参_Vue2.0中 $route 和 $router 的区别
在做Vue项目时,在路由设置和跳转时有没有遇到过 $route 和 $router?乍一看,两个看起来几乎一模一样,有点傻傻分不清楚,他们到底有什么区别?在什么情况下用呢? 我们把这2个在控制台打印出 ...
Angular+PrimeNg 分页器给后端传参分页
Angular+PrimeNg 分页器给后端传参分页文章目录 Angular+PrimeNg 分页器给后端传参分页一.导入分页器二.分页器显示三.传输某页请求给后端一.导入分页器 app.m ...
vue路由route的restful风格传参
前面讲了vue的ref传值和bus总线传值CSDN,父组件给子组件传值CSDN,子组件给父组件传值CSDN四种传值方式,以及路由的两种跳转方式,本篇文章再介绍一下vue的路由restful风格(表述性 ...
angular路由传递参数_详解Angular5 路由传参的3种方法
本文介绍了Angular5 路由传参,一共3种方法.分享给大家,具体如下: 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product? ...