Angular 4.x+Ionic3 を使用した Ionic3.x ポップでの逆値転送の詳細な説明

この記事では、Angular 4 の Ionic3.x Pop の逆値転送に関する関連情報を主に紹介します。学習の価値、それを必要とする友人、一緒に学習してください。

1.Ionic3.x ページ転送値転送

転送値転送については、前の記事で説明しました。詳細については、こちらを参照してください: http://www.jb51.net/article / 136302.htm

2.Ionic3.x ページ ポップ リバース値転送には、主に 2 つの方法があります

1. ES6 を使用して Promise オブジェクトを提供します

2 Ionic3.x を使用して Event オブジェクト、オブザーバー モードを提供します(パブリッシュ/サブスクライブ)

1) ES6 を使用して Promise オブジェクトを提供します

ページ A とページ B の 2 つのページがあると仮定します。シナリオは次のとおりです。A はページ B にジャンプし、ページ A は次のとおりです。ページ B のページ A に返されます。返される値。

ページコード

html content

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

ts コンテンツ:

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

注: Promise は Es6 によって提供されるオブジェクト、new はオブジェクト、および 2 つのコールバックがあります関数、1 つは解決、もう 1 つは拒否です。解決は実行が成功した場合のコールバックです。つまり、then 実行メソッドを呼び出します。拒否は実行失敗のコールバックで、対応するものは catch メソッドを呼び出します。新しい async と await、async が正しい Promise のさらなるカプセル化。詳細については公式ドキュメントを参照してください。

B ページ コード

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) Ionic3 を使用します

1。最初のパラメーターは、公開イベントの名前です。 2 番目のパラメーターはデータを送信するためのもので、実際には 3 番目、4 番目なども送信できます。すべてデータを送信できます

2. サブスクライブ (トピック、ハンドラー)

最初のパラメーターはイベントです。 2 番目のパラメータは、パブリケーションで送信されるパラメータを表します。3 番目のパラメータは、対応するパブリケーションの 3 番目のパラメータになります。 on....`

3. 購読解除 unsubscribe(topic, handler)

最初のパラメータは購読解除するイベントの名前で、2 番目のパラメータはコールバック関数、戻り値: 正常に削除された場合は true を返します

逆値転送を実装するコードは以下の通りです

Aページコード

tsコード

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

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

Bページコード

tsコード

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

上記それは私です将来すべての人に役立つことを願っています。

関連記事:

vue {{}} のレンダリング時にちらつく問題とその解決策

js が ModelAndView 値を取得する問題についての簡単な説明

Vue ページ読み込み時のちらつきの問題

以上がAngular 4.x+Ionic3 を使用した Ionic3.x ポップでの逆値転送の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。