angular 路由传参

cart.component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router'@Component({selector: 'cart',template: `<h1>购物车页面</h1><button (click)="handleClick()">去结算</button><a routerLink="/myOC/333">去结算</a>`
})export class CartComponent implements OnInit {constructor(private myRouter:Router) { }ngOnInit() { }handleClick(){this.myRouter.navigateByUrl('myOC/123');}
}

orderconfirm.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router'@Component({selector: 'orderconfirm',template: `<h1>订单确认页面</h1><p>价格：{{price}}</p>`
})export class OrderConfirmComponent implements OnInit {price:number=0;constructor(private myAR:ActivatedRoute) { }ngOnInit() {this.myAR.params.subscribe((result)=>{console.log(result.price);this.price=result.price;})}
}

app.router.ts

import {CartComponent} from './demo16/cart.component';

import {OrderConfirmComponent} from './demo16/orderconfirm.component';

{ path: 'myOC/:price', component: OrderConfirmComponent},

最后还需要在app.module.ts加些配置就好。

angular 路由传参相关推荐

几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
angular路由传递参数_详解Angular5 路由传参的3种方法
本文介绍了Angular5 路由传参,一共3种方法.分享给大家,具体如下: 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product? ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
Vue 踩坑日志 - 有关路由传参的坑
1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...
react更改路由入参_react怎么路由传参？
react路由传参(4种方式) 1.通过params传参(刷新页面后参数不消失,参数会在地址栏显示) 路由页面: //注意要配置 /:id 路由跳转并传递参数:链接方式:XX //或: XXjs方式: ...
vue2.0父向子传参，子向父传参，路由传参
父向子传值: //父组件 <selectionGroup v-for="item in tab" :item="item"></selecti ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...

angular 路由传参

angular 路由传参相关推荐

最新文章

热门文章