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

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

今天的文章angular 路由传参分享到此就结束了，感谢您的阅读。