ionic5/angular11使用路由及路由传值和取值

angular路由中文官方

在ionic5中创建angular项目，路由使用angular路由

一、创建一个ionic项目

ionic start myrouter tabs --type=angular

二、ionic5中默认三个tab切换页面，再创建一个新页面。通过tab1里的跳转按钮点击跳转至tab1-one页面

ionic g page tab1-one

三、编写tab1.page.html。

<ion-header >
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content >
  <ion-button size="small" (click)="goToOne()">跳转</ion-button>
</ion-content>

四、在tab1.page.ts里编写点击事件触发的跳转方法。

import { Component } from '@angular/core';
//导入路由组件
import {Router} from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(private router : Router) {}


  goToOne(){
    this.router.navigateByUrl("/tabs/tab1/tab1-one");
  }

}

五、编写路由规则，只需在以下其中一处编写即可。

1、在app-routing.module.ts里编写路由规则，这个是根路由，所有路由规则都可以在这里编写。

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'tabs/tab1/tab1-one',
    loadChildren: () => import('./tab1-one/tab1-one.module').then( m => m.Tab1OnePageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app-routing.module.ts这个文件可以看到在创建项目时已经自动导入到app.module.ts里。在ionic5里每个页面组件独立路由模块xx-routing.module.ts文件都已经导入到对应组件xx.module.ts里。

2、也可以在需要使用路由的地方编写路由规则，ionic5为每个页面组件都创建了独立路由模块xx-routing.module.ts。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Tab1Page } from './tab1.page';


const routes: Routes = [
  
  {
    path: 'tab1-one',
    loadChildren: () => import('../tab1-one/tab1-one.module').then(m => m.Tab1OnePageModule)
  },
  {
    path: '',
    component: Tab1Page,
  }
  
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Tab1PageRoutingModule {}

3、同理，在tabs-routing.module.ts里也可以编写路由规则。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      // 在tabs的子路由中定义路由规则
      {
        path:'tab1/tab1-one',
        loadChildren: () => import('../tab1-one/tab1-one.module').then(m => m.Tab1OnePageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  //在tabs同级定义路由规则
  // {
  //   path: 'tabs/tab1/tab1-one',
  //   loadChildren: () => import('../tab1-one/tab1-one.module').then(m => m.Tab1OnePageModule)
  // },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
})
export class TabsPageRoutingModule {}

六、路由传递参数，重新编写tab1.page.ts里的goToOne()方法。

import { Component } from '@angular/core';
//导入路由组件
import {Router} from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(private router : Router) {}


  goToOne(){
    //路径填写路由规则里的path
    // this.router.navigateByUrl("/tabs/tab1/tab1-one");
    this.router.navigate(["/tabs/tab1/tab1-one"],{
        queryParams:{
          "data":"参数传递成功"
        }
      });
  }

}

七、在tab1-one页面获取参数值，在tab1-one.page.ts编写代码。

import { Component, OnInit } from '@angular/core';
//导入路由相关组件获取参数传递的值
import { ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-tab1-one',
  templateUrl: './tab1-one.page.html',
  styleUrls: ['./tab1-one.page.scss'],
})
export class Tab1OnePage implements OnInit {

  constructor(private activatedRoute :ActivatedRoute) { }
  data :any;
  ngOnInit() {
    //获取从上一个页面传递过来的参数
    this.activatedRoute.queryParams.subscribe((res)=>{
      this.data=res.data;
    });
  }

}

八、在tab1-one.page.html页面展示

<ion-header>
  <ion-toolbar>
    <ion-back-button slot="start" >返回</ion-back-button>
    <ion-title>tab1-one</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <span>{{data}}</span>
</ion-content>

运行程序查看效果：