如何在ionic 4和amp;中的页面之间导航5? [英] How to navigate between pages in ionic 4 & 5?

问题描述

我有一个由ionic 3开发的项目.但是我休息了一下，当我再次开始使用ionic时，我看到新版本的导航系统发生了变化.我的项目是一个简单的项目.该项目列出了一个数组中的数据，有关该数据的详细信息显示在另一个页面上.

I had a project that I developed with ionic 3. But I took a break and when I started working again with ionic, I saw the navigation system change in the new versions. My project is a simple project. This project that lists the data in the a array and details about the data appear on a different page.

我在Ionic 3上执行此操作 homepage.ts

I was doing this on Ionic 3: homepage.ts

 export class HomePage  {

  items = [];

    constructor(public navCtrl: NavController) {
      this.initializeItems();}
      initializeItems() {
      this.items = [
   {
    'title': 'John',
    'image': '',
    'hair': 'black',
  },
   {
    'title': 'Brendon',
    'image': '',
    'hair': 'blonde',
  }];

openNavDetailsPage(item) {
    this.navCtrl.push(DetailsPage, { item: item });
  }

detailspage.ts

 export class DetailsPage {
   item;

   constructor(params: NavParams) {
     this.item = params.data.item;
   }
 }

NavCtrl和NavParams在版本5中不再可用(我认为在版本4中).我确实从主页导航到了下一页(ionic 5). homepage.ts:

NavCtrl and NavParams are no longer available in version 5 (and I think in version 4). I did to navigate from the home page to the next page(ionic 5). homepage.ts:

    toDetailsPage(){
      this.router.navigate(['details'])
    }

但是，我无法根据列表中的数据进行导航.如何根据下一代版本执行此操作?

However, I couldn't navigate according to the data on my list. How can I do this according to the next generation version?

推荐答案

app.routing.module.ts (路由模块)

const itemRoutes: Routes = [
    { path: 'item', component: ItemListComponent},
    { path: 'DetailsPage/:id', component: DetailComponent  }
];

homepage.ts 文件

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

  export class HomePage  {

          constructor(private router: Router)

          openNavDetailsPage(item) {
            this.router.navigate(['/DetailsPage', { item: item }]);
          }
     }

.html 文件

如果您直接要通过html页面进行路由:

If you directly want to route through html page:

<ion-button routerLink="/DetailsPage">Log In </ion-button>

或

<ion-button [routerLink]="['/DetailsPage', item.id]">Log In </ion-button>

detail.ts 文件

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

export class DetailsPage implements OnInit {

  id: any;

  constructor(private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
     this.id = this.route.snapshot.paramMap.get('id');
   }
}

除了使用JSON

homepage.ts 文件

this.router.navigate(['/DetailsPage', { item: JSON.stringify(item) }]);

detail.ts 文件

this.item = JSON.parse(this.route.snapshot.paramMap.get('item'));

这篇关于如何在ionic 4和amp;中的页面之间导航5?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！