ホームページ > ウェブフロントエンド > jsチュートリアル > Angular 4.x+Ionic3 を使用した Ionic3.x ポップでの逆値転送の詳細な説明

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

亚连
リリース: 2018-05-30 16:30:20
オリジナル
1977 人が閲覧しました

この記事では、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 &#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
 })
 }
}
ログイン後にコピー

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

  // 取消订阅
  this.events.unsubscribe(&#39;bevents&#39;); 
 })
 this.navCtrl.push(BPage);
 }
ログイン後にコピー

Bページコード

tsコード

goBack(){
 this.navCtrl.pop().then(() => {
 // 发布 bevents事件
 this.events.publish(&#39;bevents&#39;, &#39;我是B页面数据&#39;);
 });
}
ログイン後にコピー

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

関連記事:

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

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


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



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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート