ionic4 - 如何在 ionic 4 和 5 中的页面之间导航？

Question

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

我在 Ionic 3 上这样做:
首页.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 });
  }

详情页.ts

 export class DetailsPage {
   item;

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

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

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

但是，我无法根据列表中的数据进行导航。我怎样才能根据下一代版本做到这一点？

Answer 1

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

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

首页.ts 文件

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

  export class HomePage  {
    
          constructor(private router: Router)
    
          openNavDetailsPage(item) {
            this.router.navigate(['/DetailsPage', { item: item }]);
          }
     }

.html 文件
如果你想直接通过 html 页面路由:

<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 DetailComponent implements OnInit {

  id: any;

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

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

除了使用 JSON
首页.ts 文件

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

detail.ts 文件

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

one more way

首页.html

<div *ngFor=""let item of items"> // here items is an array
   <button (click)="goToDetail(item)" class="rgt-btn">
        <ion-icon slot="icon-only" name="add-circle" ></ion-icon>
   </button>
</div>

首页.ts

   import { NavigationExtras, Router } from '@angular/router';
    
      export class HomePage  {
    
        constructor(private router: Router)
    
        goToDetail(item){
           let navigationExtras: NavigationExtras = item; 
           this.router.navigate(['/DetailsPage'], navigationExtras);
         }
     }

详情页.ts

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

export class DetailComponent implements OnInit {

  item: any;

  constructor(private router: Router) {
    if (this.router.getCurrentNavigation()) {
        this.item = this.router.getCurrentNavigation().extras;
  }
 }
    

}

> OR With the help of service page

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NavExtrasService {

    extras: any;

      constructor() { }

      public setExtras(data){
        this.extras = data;
      }

      public getExtras(){
        return this.extras;
      }
    }

假设我正在从主页导航到详细信息页面，在页面 A:

this.navExtras.setExtras(extras)
this.router.navigateByUrl('detailPage');

然后在详细信息页面中，我以这种方式检索附加内容:

 let newData: any;
 this.newData = navExtras.getExtras();