angular 路由传参

偏执的太偏执、 2022-06-01 06:54 249阅读 0赞

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加些配置就好。

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 24 阅读

相关 vue路由传参

vue路由跳转页面传参 1、使用路由url携带参数传递主页Main.vue模板脚本 <template> <div class="hell

迷南。/ 2022年11月29日 13:28/ 0 赞/ 260 阅读

相关 angular 路由传参

cart.component.ts import { Component, OnInit } from '@angular/core'; import {Ro

偏执的太偏执、/ 2022年06月01日 06:54/ 0 赞/ 250 阅读

相关路由传参

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></titl

末蓝、/ 2022年06月01日 00:14/ 0 赞/ 271 阅读

相关 vue 路由传参

this.$router.push({path:'home',name:'主页'params:{id:1}} 或者 <router-link :to="{

àì夳堔傛蜴生んèń/ 2022年05月29日 09:00/ 0 赞/ 278 阅读

相关 Angular 路由传参数

Angular路由传参配置路由通过 descr/1 等形式访问 DescrComponent，此时 1 为携带参数。 { path: 'descr/:

野性酷女/ 2022年05月27日 09:15/ 0 赞/ 218 阅读

相关 angular 路由传参

.state('xxxx', \{ url: 'xxxx', templateUrl: 'xxx.html', controller: 'xxxxController',

冷不防/ 2022年05月17日 23:16/ 0 赞/ 248 阅读

相关 vue路由传参

在vue中使用插件的步骤 1、引入Vue 2、引入插件 3、使用插件 Vue.use() 当路由配置成功以后Vue中就会多了两个内置组件 <router-view>

雨点打透心脏的1/2处/ 2021年10月26日 15:40/ 0 赞/ 421 阅读

相关路由传参和路由卫士

1.动态路由匹配动态路由也可以叫做路由传参。组件的显示内容经常会根据用户选择的内容不同来在同一个组件中渲染不同内容。那么在这个时候就需要动态路由。 1. 动态

古城微笑少年丶/ 2021年08月19日 15:06/ 0 赞/ 460 阅读

相关 rn 路由传参、navigation传参

路由传参: (1)传参数 (1)发送函数式传递 function xx({navigation

傷城~/ 2021年07月24日 16:57/ 0 赞/ 1273 阅读