关于 Ionic4 对 NavController 进行跳转传递参数的解决方案 (NavParams)

首先我们先确认好传送方,接收方

传送方 demoSend 的 template：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<ion-header>
<ion-toolbar>
<ion-title>传送方</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<ion-item>
<ion-input type="text" placeholder="Awesome Input" [(ngModel)]="uName"></ion-input>
</ion-item>
</ion-list>
<ion-button (click)="sendArg()">
Click me
</ion-button>
</ion-content>

传送方 demoSend 的 Ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { Router } from '@angular/router';
@Component({
selector: 'app-demo-send',
templateUrl: './demoSend.html',
styleUrls: ['./demoSend.page.scss'],
})
export class demoSendPage implements OnInit {
uName: string = "";
constructor(private nav: NavController, private myRouter: Router) { }

ngOnInit() {
}
// 跳转到 demoArg 并发送参数
async sendArg() {
await this.nav.navigateForward(['/demoArg'], {
queryParams: {
userName: this.uName
}
});
}
}

接收方 demoArg 的 template:

1
2
3
4
5
6
7
8
9
10
11

<ion-header>
<ion-toolbar>
<ion-icon style="float:left;width:50px;height:30px;" name="arrow-back" (click)='goBack()'>
</ion-icon>
<ion-title>demoArg</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<h1>{{"接收到的参数为"+uName}}</h1>
</ion-content>

接收方 demoArg 的 Ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
selector: 'app-demo-arg',
templateUrl: './demoArg.page.html',
styleUrls: ['./demoArg.page.scss'],
})
export class demoArgPage implements OnInit {
uName: string = "";
constructor(private nav: NavController, public activeRoute: ActivatedRoute) { }

ngOnInit() {
// 需要接收用户传递来的参数,并显示在视图中
this.activeRoute.queryParams.subscribe((params: Params) => {
console.log(params);
this.uName = params.userName;
})
}
// 返回
goBack() {
this.nav.back();
}

}