如何在 ionic 4 & 中的页面之间导航5? [英] How to navigate between pages in ionic 4 & 5?
问题描述
我有一个使用 ionic 3 开发的项目.但是我休息了一下，当我再次开始使用 ionic 时，我看到新版本中导航系统发生了变化.我的项目是一个简单的项目.该项目列出了数组中的数据以及有关数据的详细信息显示在不同的页面上.
我是在 Ionic 3 上这样做的:homepage.ts
导出类 HomePage {项目 = [];构造函数(公共导航控件:导航控制器){this.initializeItems();}初始化项目(){this.items = [{'title': '约翰','图片': ''，'头发': '黑色',},{'title': '布兰登','图片': ''，'头发': '金发',}];openNavDetailsPage(item) {this.navCtrl.push(DetailsPage, { item: item });}detailspage.ts
导出类 DetailsPage {物品;构造函数(参数:NavParams){this.item = params.data.item;}}NavCtrl 和 NavParams 在版本 5 中不再可用(我认为在版本 4 中).我确实从主页导航到下一页(ionic 5).homepage.ts:
toDetailsPage(){this.router.navigate(['详细信息'])}但是，我无法根据列表中的数据进行导航.根据下一代版本如何做到这一点?
app.routing.module.ts(路由模块)
const itemRoutes: Routes = [{ path: 'item', 组件: ItemListComponent},{ path: 'DetailsPage/:id', 组件: DetailComponent }];homepage.ts 文件
import { Router } from '@angular/router';导出类主页{构造函数(私有路由器:路由器)openNavDetailsPage(item) {this.router.navigate(['/DetailsPage', { item: item }]);}}.html 文件
如果你想直接通过html页面路由:
登录 或
登录 detail.ts 文件
import { ActivatedRoute, Router } from '@angular/router';导出类 DetailComponent 实现 OnInit {身份证:任何；构造函数(私有路由:ActivatedRoute，私有路由器:路由器) { }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'));<块引用>
另一种方式
homepage.html
//这里的items是一个数组<按钮(点击)=goToDetail(项目)"；class =rgt-btn"><ion-icon slot="icon-only";名称=添加圆圈"></离子图标>homepage.ts
import { NavigationExtras, Router } from '@angular/router';导出类主页{构造函数(私有路由器:路由器)去细节(项目){让 navigationExtras: NavigationExtras = item;this.router.navigate(['/DetailsPage'], navigationExtras);}}DetailsPage.ts
import { Router } from '@angular/router';导出类 DetailComponent 实现 OnInit {项目:任何；构造函数(私有路由器:路由器){如果 (this.router.getCurrentNavigation()) {this.item = this.router.getCurrentNavigation().extras;}}}
<块引用>>或在服务页面的帮助下
import { Injectable } from '@angular/core';@Injectable({提供在:'根'})导出类 NavExtrasService {附加:任何；构造函数(){}公共 setExtras(数据){this.extras = 数据；}公共 getExtras(){返回 this.extras;}}假设我正在从主页导航到详细信息页面，在页面 A:
this.navExtras.setExtras(extras)this.router.navigateByUrl('detailPage');然后在详细信息页面中，我以这种方式检索额外内容:
let newData: any;this.newData = navExtras.getExtras();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.
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 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 (Routing Module)
const itemRoutes: Routes = [
{ path: 'item', component: ItemListComponent},
{ path: 'DetailsPage/:id', component: DetailComponent }
];
homepage.ts file
import { Router } from '@angular/router';
export class HomePage {
constructor(private router: Router)
openNavDetailsPage(item) {
this.router.navigate(['/DetailsPage', { item: item }]);
}
}
.html file
If you directly want to route through html page:
<ion-button routerLink="/DetailsPage">Log In </ion-button>
or
<ion-button [routerLink]="['/DetailsPage', item.id]">Log In </ion-button>
detail.ts file
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');
}
}
In addition to using a JSON
homepage.ts file
this.router.navigate(['/DetailsPage', { item: JSON.stringify(item) }]);
detail.ts file
this.item = JSON.parse(this.route.snapshot.paramMap.get('item'));
one more way
homepage.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>
homepage.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);
}
}
DetailsPage.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;
}
}
Let's say I'm navigating from home to detail page, In page A:
this.navExtras.setExtras(extras)
this.router.navigateByUrl('detailPage');
Then in Detail Page, I retrieve the extras this way:
let newData: any;
this.newData = navExtras.getExtras();
这篇关于如何在 ionic 4 & 中的页面之间导航5?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
