Detaillierte Erläuterung der umgekehrten Wertübertragung in Ionic3.x und in Angular 4.x+Ionic3

In diesem Artikel werden Ihnen hauptsächlich relevante Informationen zur umgekehrten Wertübertragung von Ionic3.x Pop und Angular 4 vorgestellt. Als Referenzlernwert können Freunde, die ihn benötigen, ihn gemeinsam lernen.

1.Ionic3.x Seite Vorwärtswertübertragung

Über die Vorwärtswertübertragung habe ich im vorherigen Artikel gesprochen. Weitere Informationen finden Sie hier: http://www.jb51.net/article/136302.htm

2. Bei der umgekehrten Wertübertragung auf der Ionic3.x-Seite gibt es zwei Hauptmethoden

1. Verwenden Sie ES6, um Promise-Objekte bereitzustellen

2 Verwenden Sie Ionic3.x, um Ereignisobjekte bereitzustellen, Beobachtermodus (veröffentlichen/abonnieren)

1) Verwenden Sie ES6, um Promise-Objekte bereitzustellen

Angenommen, es gibt zwei Seiten, Seite A und Seite B. Das Szenario ist wie folgt Wenn Sie zu Seite A zurückkehren, müssen Sie den von Seite A zurückgegebenen Wert angeben.

Ein Seitencode

HTML-Inhalt

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

ts-Inhalt:

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
 })
 }
}

Bemerkungen: Promise ist ein von Es6 bereitgestelltes Objekt, new ist ein Objekt und verfügt über zwei Rückruffunktionen, eine ist auflösen, die andere ist ablehnen, resolve Es ist ein Rückruf für eine erfolgreiche Ausführung, das heißt, wir rufen die Ausführungsmethode „Reject“ auf, was dem Aufruf der „catch“-Methode entspricht Versprochen. Einzelheiten finden Sie im offiziellen Dokument!

B-Seitencode

ts-Inhalt:

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) Verwendung von Ionic3 . )

`Der erste Parameter ist der Name des Veröffentlichungsereignisses, und der zweite Parameter dient zum Senden von Daten. Tatsächlich können auch der dritte, vierte usw. gesendet werden, die alle Daten senden können

2. Subscribe subscribe(topic, handler)

Der erste Parameter ist das zu empfangende Ereignis. Der zweite Parameter stellt die Parameter dar, die beim Veröffentlichen übertragen werden die Veröffentlichung, das gleiche Abonnement Der dritte Parameter ist der dritte Parameter der entsprechenden Veröffentlichung usw....`

3. Unsubscribe unsubscribe(topic, handler)

Der erste Parameter ist der Name des abgemeldeten Ereignisses. Rückgabewert: Bei erfolgreicher Entfernung true zurückgeben

Der Code zum Implementieren der umgekehrten Wertübertragung lautet wie folgt

Ein Seitencode

ts-Code

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

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

B-Seitencode

ts-Code

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

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Das Problem und die Lösung des {{}}-Flackerns beim Rendern von Vue

Ein kurzer Vortrag darüber js-Erfassungsprobleme mit ModelAndView-Werten

Lösung für das Problem mit dem Flackern beim Laden von Vue-Seiten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der umgekehrten Wertübertragung in Ionic3.x und in Angular 4.x+Ionic3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!