Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-05-30 16:30:20
original
1940 Les gens l'ont consulté

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>
Copier après la connexion

t contenu :

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

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 = &#39;我是要给A页面数据&#39;
 this.callback(param).then(()=>{
 // pop返回方法
 this.navCtrl.pop();
 });
 }
Copier après la connexion

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(&#39;bevents&#39;, (params) => {
  // 接收B页面发布的数据
  console.log(&#39;接收数据为: &#39;+ paramsVar);

  // 取消订阅
  this.events.unsubscribe(&#39;bevents&#39;); 
 })
 this.navCtrl.push(BPage);
 }
Copier après la connexion

Code page B


Code ts


goBack(){
 this.navCtrl.pop().then(() => {
 // 发布 bevents事件
 this.events.publish(&#39;bevents&#39;, &#39;我是B页面数据&#39;);
 });
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!