Ionic 4 - как передавать данные между страницами, используя navCtrl или сервис Router

Question

В Ionic 3 вы можете использовать второй аргумент navController для передачи данных на следующую страницу и извлечения их с помощью службы navParams.

Это была действительно удобная функция. Есть ли эквивалентный API для маршрутизации в Ionic 4?

Вы всегда можете JSON.stringify объект / массив для routerParams, что, на мой взгляд, менее удобно.

В Ionic 4 вы можете передавать данные с помощью modalController, используя ComponentProps и @Input (), что делает его более подходящим для быстрой реализации push / pop.

EDIT

Мое намерение в этом вопросе - выяснить, есть ли какие-либо нативные API-интерфейсы из Angular 6+ или Ionic 4+. Мне хорошо известны способы реализации пользовательского сервиса или распознавателя для достижения этой цели.

Цель состоит в том, чтобы максимально использовать api ionic и angular, поскольку в более крупных проектах каждый пользовательский код требует документации и увеличивает сложность.

Answer 1

Вы можете просто передать объект с помощью route , используя queryParams .

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

Для получения этого объекта необходимо использовать 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'
                 }
                }

Чтобы отправить вышеуказанный объект , вам необходимо сначала stringify объекта с помощью JSON.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)
                  },
                });
              }

Чтобы получить этот объект , вам необходимо проанализировать этот объект, используя JSON.parse () метод.

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


 constructor(public activatedRoute : ActivatedRoute,) { 

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

Answer 2

На самом деле существует много способов передачи данных между страницами. Я перепробовал Route и navCtrl, но у меня это не сработало. Я делюсь способом передачи данных, используя SERVICE.

1. Создайте сервис в своем ионном проекте, или вы можете выполнить те же шаги для проекта Angular (изменится только команда):

  $ ionic generate provider <any name>

2. Поместите эти коды в файл 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);
    }
  }

3. Импорт службы на обеих страницах, откуда вы берете данные и где вы хотите получить данные. как это.

  import { UserService } from "./../services/user.service";

  constructor(
    private userServ: UserService,
  ) {}

4. Установите ваши данные так:

  this.userServ.changeData(responceData.data);

5. получите ваши данные так:

  sentData: any;

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

это работает для меня.

Answer 3

Я работаю с Ionic 4 с момента первой беты, и я не нашел то, что вы ищете. Я полагаю, что команда Ionic хочет оставить задачу взаимодействия компонентов за компонентной структурой (Angular, React, Vue ...).

Если вы хотите уменьшить сложность, вы можете использовать службы Angular, redux или ngrx для управления состоянием приложения. Таким образом, вы можете перейти к представлению, обновить глобальное состояние с помощью действия, а затем вернуться к предыдущему представлению и показать обновленное состояние.

Answer 4

Я решил эту проблему, поместив 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];
    }
}

Надеюсь, это поможет!