web-dev-qa-db-ja.com

Ionic 4-navCtrlまたはルーターサービスを使用してページ間でデータを渡す方法

Ionic 3では、navControllerの2番目の引数を使用して、次のページにデータを渡し、navParamsサービスでデータを取得できます。

これは本当に便利な機能でした。 Ionic 4にルーティング用の同等のAPIはありますか？

いつでもJSON.stringifyでオブジェクト/配列をrouterParamsにできますが、これは私には不便です。

Ionic 4では、ComponentPropsと@Input（）を使用してmodalControllerでデータを渡すことができ、迅速なプッシュ/ポップの実装により適しています。

編集

この質問の私の意図は、Angular 6+またはIonic 4+のネイティブAPIがあるかどうかを調べることです。これを実現するためにカスタムサービスまたはリゾルバーを実装する方法をよく知っています。

大規模なプロジェクトでは各カスタムコードにドキュメントが必要であり、複雑さが増すため、IonicおよびAngularのAPIを最大限に活用することが目標です。

angularionic-frameworkangular-routingionic4
10
Han Che

これを解決するには、変数に値を設定する関数と、再度取得する関数を持つプロバイダーでIonic NavControllerをラップします。 this.navParams.get('myItem')に似ています。

以下をご覧ください。

import { Injectable } from '@angular/core';
import { NavController } from '@ionic/angular';

@Injectable()
export class Nav {
    data: any;

    constructor(public navCtrl: NavController) {
        // ...
    }

    Push(url: string, data: any = '') {
        this.data = data;

        this.navCtrl.navigateForward('/' + url);
    }

    pop(url) {
        this.navCtrl.navigateBack('/' + url);
    }

    get(key: string) {
        return this.data[key];
    }
}

お役に立てれば！

9
Adam Thoor

queryParamsを使用してrouteでobjectを渡すだけです。

import { Router } from '@angular/router';

      object = {
            name: 'subham',
            age: '34',
            address: '34 street, Delhi, India'
            }

      constructor(public router : Router) {}

            onGoToNextPage(){
            this.router.navigate(['/pageName'],{
            queryParams: this.object,
            });
          }

これを受信するにはobjectを使用する必要がありますActivatedRoute'@ angular/router'からインポートする

import { ActivatedRoute } from '@angular/router';


 constructor(public activatedRoute : ActivatedRoute,) { 

                this.activatedRoute.queryParams.subscribe((res)=>{
                  console.log(res);
              });
              }

オブジェクトの複雑な構造がほとんどない場合。

送信するオブジェクトがあると仮定します。

object = {
                name: 'subham',
                age: '34',
                address: '34 street, Delhi, India'
                favourite_movie: ['dhoom','race 2','krishh'],
                detail : {
                  height: '6ft',
                  weight: '70kg'
                 }
                }

上記のobjectを送信するには、まずstringifyJSON.stringfy（）を使用してオブジェクトを作成する必要があります。

   import { Router } from '@angular/router';

          object = {
                    name: 'subham',
                    age: '34',
                    address: '34 street, Delhi, India'
                    favourite_movie: ['dhoom','race 2','krishh'],
                    detail : {
                      height: '6ft',
                      weight: '70kg',
                     }
                    }

          constructor(public router : Router) {}

                onGoToNextPage(){
                this.router.navigate(['/pageName'],{
                queryParams: {
                   value : JSON.stringify(this.object)
                  },
                });
              }

これを受け取るにはobjectする必要がありますparseJSON.parse（）メソッドを使用してこのオブジェクト。

import { ActivatedRoute } from '@angular/router';


 constructor(public activatedRoute : ActivatedRoute,) { 

                this.activatedRoute.queryParams.subscribe((res)=>{
                  console.log(JSON.parse(res.value));
              });
              }
6
Tahseen Quraishi

実際、ページ間でデータを渡す方法はたくさんあります。 RouteとnavCtrlを試してみましたが、うまくいきませんでした。 SERVICEを使用してデータを渡す方法を共有しています。

  1. ionicプロジェクトでサービスを作成するか、Angularプロジェクトでも同じ手順を実行できます（コマンドのみが変更されます）。
  $ ionic generate provider <any name>
  1. このコードをサービスTSファイルに配置します。
  import { Injectable } from "@angular/core";
  import { map } from "rxjs/operators";
  import { BehaviorSubject } from "rxjs";  

  @Injectable({ providedIn: "root" })

  export class <your_class_name_here> {
    constructor() {}

    private dataSource = new BehaviorSubject("default message");
    serviceData = this.dataSource.asObservable();

    changeData(data: any) {
      this.dataSource.next(data);
    }
  }
  1. データを取得する場所とデータを取得する場所の両方のページでサービスをインポートします。このような。
  import { UserService } from "./../services/user.service";

  constructor(
    private userServ: UserService,
  ) {}
  1. 次のようにデータを設定します。
  this.userServ.changeData(responceData.data);
  1. 次のようなデータを取得します。
  sentData: any;

  ngOnInit() {
    this.userServ.serviceData
      .subscribe(data => (this.sentData = data));
    console.log("sent data from login page : ", this.sentData);
  }

これは私のために動作します。

2
Sushil

私はこれを解決しました

JSON.stringifyを使用して、ルートでオブジェクトデータを渡すだけです。

this.router.navigate(['namepage',JSON.stringify(data)]);

このオブジェクトを受信するには、JSON.parse（）メソッドを使用してこのオブジェクトを解析する必要があります。

items: any;

this.items = JSON.parse(this.activatedRoute.snapshot.paramMap.get('id'));

データを視覚化するために、保存されるフィールドの名前を添付します

this.idxxx = this.items.namefield;

最初にapp.routing.module.tsでパラメーターを定義する必要があります

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'namepage/:id', loadChildren: './pages/page/page.module#pagePageModule' },
];

私はそれがあなたを助けることを願っています、それは本当にそれをする最も簡単な方法です

0
Andres Angulo

最初のベータ版以来Ionic 4を扱ってきましたが、探しているものが見つかりませんでした。 Ionicチームは、コンポーネントインタラクションのタスクをコンポーネントフレームワーク（Angular、React、Vue ...）に任せたいと考えています。

複雑さを軽減する場合は、アプリケーションの状態管理にAngularサービス、reduxまたはngrxを使用できます。これにより、ビューに移動し、アクションを介してグローバル状態を更新し、前のビューに戻って更新された状態を表示できます。

0
David Villamizar

Ionic v4/Angular 7.2+でページから別のページにパラメーターを渡す方法は複数あります。

1。 Extras状態の使用（Angular 7.2以降の新規）-推奨

シンプルできれい

// original page
let navigationExtras: NavigationExtras = { state: { foo: this.foo } };
this.router.navigate(['destination-path'], navigationExtras);
// destination page
constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.foo= this.router.getCurrentNavigation().extras.state.foo;
      }
    });
  }

2。サービスとリゾルバーを使用する

データには影響しませんが、少し重いです。

データをサービスに保存し、ルーターを使用してリゾルバーを渡します

3。オブジェクトのIDを使用する（推奨されない）

オブジェクトが保存されている場合は、URLでIDを渡し、再度取得できます。

アプリケーションの速度が遅くなり、オブジェクトがどこかに保存され、ネットワークの問題が増加する可能性があることを意味します（ローカルに保存しない場合）

4。クエリパラメータの使用（推奨されていません）

オブジェクトを文字列化する：@Tahseen Quraishiの回答を参照

渡すことができる情報はわずかで、URLは恐ろしいです

ここにいくつかの例

0
NayoR

このようにnavCtrlを使用してデータを別のページに渡すことができます

1ページ目

this.navCtrl.Push(page2,{item:'Data you want to send'});

2ページ目

constructor(public navCtrl: NavController, public navParams: NavParams) {
   this.value = navParams.get('item');
 }
0
Sivaramakrishnan