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

2. Subscribe subscribe(topic, handler)

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

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.

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

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!