ionic5跳转页面并传参的两种方式

方式一

1.路由中添加模型

首先在app-routing.module.ts中找到即将跳转的页面的path,在path后添加参数名格式为 /:参数名1/:参数名2 …

{ path: 'test/:id/:name', loadChildren: './test/test.module#testPageModule' }

2.跳转页面并传递参数

2.1 ts中跳转

import { Router } from '@angular/router';

constructor(private router:Router) {}

//test为页面,后面接参数 ,参数1,参数2,...
this.router.navigate(["test",参数1,参数2]);

2.2 html中跳转

<ion-button expand="block" routerLink="/test/fjalfjaojfoa/jack" routerDirection="forward">
            跳转页面
</ion-button>

3.接收参数

import { ActivatedRoute, Params } from '@angular/router';

  constructor(public activeRoute: ActivatedRoute) {
    this.uuid = this.activeRoute.snapshot.params['id'];
    this.name = this.activeRoute.snapshot.params['name'];
   }

方式二

1.跳转页面并传递参数

import { Router } from '@angular/router';

//参数必须写到queryParams中
this.router.navigate(["test"],{
        queryParams:{
          id: "12313",
          name: '曹操'
        }
    });

2.接收参数

import { ActivatedRoute, Params } from '@angular/router';

  constructor(public activeRoute: ActivatedRoute) {
    this.uuid = this.activeRoute.snapshot.queryParams['id'];
    this.name = this.activeRoute.snapshot.queryParams['name'];
   }