Explication détaillée du transfert de valeur inverse dans Ionic3.x pop dans Angular 4.x+Ionic3

Cet article vous présente principalement les informations pertinentes sur le transfert de valeur inverse de Ionic3.x pop vers Angular 4. La valeur d'apprentissage de référence, les amis qui en ont besoin peuvent l'apprendre ensemble.

1.Ionic3.x page transfert de valeur à terme

À propos du transfert de valeur à terme, j'en ai parlé dans l'article précédent, vous pouvez voir ici pour plus de détails : http://www.jb51.net/article/136302.htm

2. Transfert de valeur inversé de la page Ionic3.x, il existe deux manières principales

1. Utilisez ES6 pour fournir des objets Promise

2 Utilisez Ionic3.x pour fournir des objets Event, mode observateur (publication/abonnement)

1) Utilisez ES6 pour fournir des objets Promise

Supposons qu'il y ait deux pages, la page A et la page B. Le scénario est le suivant A passe à la page B. Lorsque la page B. revient à la page A, vous devez donner la valeur renvoyée par la page A.

Un code de page

contenu HTML

<button (tap)="goToBPage()">跳转到B页面</button>

t contenu :

import BPage from './BPage'
export class APage{
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
// 用于pop 回调的 block
callBackFromB =(params) => {
 return new Promise((resolve, reject) => {
 if(params){
  resolve('成功取到B页面返回的参数');
  console.log('B页面参数为: '+ params);
 }else{
  reject(‘取回B页面数据失败')
 }
 });
 }
 goToBPage (){
 this.navCtrl.push(BPage, {
 callback: this.callBackFromB
 })
 }
}

Remarque : Promise est un objet fourni par Es6, new est un objet et possède deux fonctions de rappel, l'une est la résolution et la other C'est rejet, et solve est le rappel pour une exécution réussie, qui est la méthode que nous appelons ensuite pour exécuter. Reject est le rappel pour l'exécution échouée, ce qui correspond à l'appel de la méthode catch. Maintenant, es7 a un nouveau async et wait. est une encapsulation supplémentaire de Promise Détails Veuillez consulter la documentation officielle pour plus de détails !

Code de la page B

contenu du ts :

constructor(public navCtrl: NavController, public navParams: NavParams) {
// 获取对面A传过来的回调方法
 this.callback = this.navParams.get("callback")
 
}
 goBack(){
 let param = '我是要给A页面数据'
 this.callback(param).then(()=>{
 // pop返回方法
 this.navCtrl.pop();
 });
 }

1) Utilisez Ionic3.x pour fournir des objets Event, mode observateur (publication/abonnement)

L'objet événement a trois méthodes principales

1. eventData)

`Le premier paramètre est de publier le nom de l'événement, et le deuxième paramètre est d'envoyer des données. En fait, le troisième, le quatrième, etc. peuvent également être envoyés, qui peuvent tous envoyer des données<.>

2. Subscribe Subscribe(topic, handler)

Le premier paramètre est le tube aluminium de l'événement à recevoir. Le deuxième paramètre représente les paramètres transmis lors de la publication. Si la publication a un troisième paramètre, le même Le troisième paramètre de l'abonnement est le troisième paramètre de la publication correspondante, et ainsi de suite....`

3. Désabonnement désabonnement(sujet, gestionnaire)

Le paramètre 1 est le nom de l'événement à désinscrire, et la seconde est une fonction de rappel, valeur de retour : si supprimé avec succès, renvoie true

Le code pour implémenter le transfert de valeur inversé est le suivant

Un code de page

Code ts

 goToBPage(){
 this.events.subscribe('bevents', (params) => {
  // 接收B页面发布的数据
  console.log('接收数据为: '+ paramsVar);

  // 取消订阅
  this.events.unsubscribe('bevents'); 
 })
 this.navCtrl.push(BPage);
 }

Code page B

Code ts

goBack(){
 this.navCtrl.pop().then(() => {
 // 发布 bevents事件
 this.events.publish('bevents', '我是B页面数据');
 });
}

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Le problème et la solution du scintillement de {{}} lors du rendu de la vue

Une brève discussion sur js Problèmes d'acquisition avec les valeurs ModelAndView

Solution au problème de scintillement du chargement de la page vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!