Ioni c: передача данных с вкладок на вкладку

Question

Я прошу вашей помощи. Я работаю на Ioni c 5 (navParams не работает), и у меня есть проблемы, с которыми я боролся долгое время. Я проверил много тем, но ни одна из них не помогает решить мои проблемы. У меня есть данные на вкладках компонентов, которые я хочу отправить его детям, особенно tab2, я использую NavigationExtras, но он все еще не работает.

вот мой код:

tabs.page. ts

export class TabsPage {

  donnee_article: any; // contient les données que nous envoient la page connexion
  login: string;
  password: string;
  modal_open: boolean = false; //booléan permet d'empécher le modal d'ouvrir une deuxième fois après s'être fermé

  constructor(private http: HttpClient,public modalController: ModalController,private route: ActivatedRoute, private router: Router) 
  {
    console.log("create modal");
    this.presentModal() // on affiche le modal
  }

  async presentModal() 
  {
    const modal = await this.modalController.create({
      component: ConnexionPage
    });

    modal.onDidDismiss().then((dataReturn: any) => {
      console.log(dataReturn);

      if (dataReturn !== null)
      {
        this.login = dataReturn.data.state.login_classe;
        this.password = dataReturn.data.state.password_classe;

        console.log("login = " + this.login + " et password = " + this.password)

        this.demande_requete_article(this.login, this.password); // on demande les articles en fonctions de login et password

        //this.envoie_donnee_article_tabs(this.donnee_article); // on envoie à la tab2
      }
    });
    await modal.present();

  }

  demande_requete_article(login_requete, password_requete) // permet de recevoir les articles en fonction de login et password en parametre
  {
    this.http.get('http://www.sebastien-thon.fr/cours/M4104Cip/projet/index.php?login='+login_requete+'&mdp='+password_requete).subscribe((data) => 
    {
      this.donnee_article = data; // donnee_article devient la réponse JSON de la requête
      console.log(this.donnee_article);
    });
  }


  **async envoie_donnee_article_tabs(article) // permet d'envoyer les données des articles à la table 2
  {
    let Envoie_article: NavigationExtras = {
      state:
      {
        article: article,
      }
    }
    await this.router.navigate(['/tab2'], Envoie_article); // on envoie les données au tab2*/
  }**
}

tab2.page.ts

export class Tab2Page {

  article: any; // objet JSON contennant les articles envoyé par tabs

  constructor(private route: ActivatedRoute, private router: Router) 
  {
    this.load_data_article();
    console.log(this.article)
  }

  async load_data_article()
  {
    this.route.queryParams.subscribe(params => async function(){
      if (this.router.getCurrentNavigation().extras.state) 
      {
        this.article = await this.router.getCurrentNavigation().extras.state.article;
      }
    });
  }

В результате, либо ожидают this.router.navigate (['/ tab2'], Envoie_article); не работает, или вкладки2 начинают загружаться до того, как данные были отправлены вкладками.

Я жду вашего ответа. Заранее спасибо

Answer 1

Этот подход можно использовать для отправки / получения данных с помощью маршрутизатора.

Отправка

this.router.navigateByUrl('/route', {
  state: {
    article: article,
  },
});

Получение

// init variable
private state$: Observable<object>;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // point state observable to the route paramMap which holds the route parameters
  this.state$ = this.route.paramMap.pipe(map(() => window.history.state));
}

ionViewWillEnter() {
  // let's keep functionality separate
  this.getArticleFromRoute();
}

getArticleFromRoute() {
  // subscribe to the state observable and receive the data when it is passed
  this.state$.subscribe({
    next: (data: object) => {
      this.article = data['article'];
    },
  });
}