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

Question

我有一个用离子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 中(。我确实从主页导航到下一页(离子5(。首页：

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

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

Answer 1

app.routing.module.ts(Routing Module(

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>

详细信息.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) }]);

详细信息.ts文件

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

另一种方式

主页.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;
}
}

}

>或 借助服务页面

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();