离子：this.router.getCurrentNavigation().extras.state 未定义

Question

我再次请求您的编程支持。

让我解释一下我的问题和我的背景。 在 ionic 中，我必须制作一个标签移动应用程序，首先要求您编写登录名/密码以进行连接。 当用户点击连接按钮时，它将首先验证登录名/密码是否正确，然后将登录名/密码数据发送到选项卡组件，该组件将发送带有登录名/密码数据的请求以获取登录的文章和用户的密码。

有两件事你需要知道：

1. 我的登录页面是由标签组件创建的模式
2. 我使用 NavigationExtras / Extra State 将数据发送到另一个页面，但我仅在用户单击按钮时才这样做，因此模式页面的构造函数中没有任何内容

因此，在创建模态 nn 选项卡之后，我正在等待来自 router.navigate 的数据，仅当单击模态中的按钮时，遗憾的是选项卡构造函数不会等待按钮被单击所以我结束了让 this.router.getCurrentNavigation().extras.state 在选项卡中未定义

如何防止这种情况并让标签组件等待模态页面按钮被点击以发送所需的数据？

代码如下：

tabs.page.ts

    export class TabsPage {

  donnee_article: any;
  login: string;
  password: string;

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

    if (this.reponse_connexion(this.login,this.password) == true)
    {
      this.http.get('http://www.sebastien-thon.fr/cours/M4104Cip/projet/index.php?login='+this.login+'&mdp='+this.password).subscribe((data) => 
      {
        this.donnee_article = data;
        console.log(this.donnee_article);
      }); 
    }
    console.log(this.login);
    console.log(this.password);

  }

  reponse_connexion(login, password)
  {
    console.log("router " + this.router.getCurrentNavigation().extras.state)
    if (this.router.getCurrentNavigation().extras.state)
    {
      this.login = this.router.getCurrentNavigation().extras.state.login_classe;
      this.password = this.router.getCurrentNavigation().extras.state.password_classe;

      if (typeof this.login != "undefined" && this.password != undefined)
      {
        console.log("true");
        return true;
      }
      else
      {
        console.log("false");
        return false;
      }
    }

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

connexion.page.ts

export class ConnexionPage implements OnInit {

  requete: any; // varaible stockée la réponse du serveur
  login  : string; // représente le login du premier input 
  password: string; // représente le mot de passe du deuxième input
  message_warning: string; // représente la boite de message en cas de réponse de la requête

  constructor(private http: HttpClient, private modalCtrl:ModalController, public alertController: AlertController, public router: Router) 
  {

  }

  Connexion_classe()
  {
    console.log(this.login);
    console.log(this.password);
    this.http.get('http://www.sebastien-thon.fr/cours/M4104Cip/projet/index.php?connexion&login='+this.login+'&mdp='+this.password)
    .subscribe((data) => 
    {
      this.requete = data;
      if (this.requete.erreur === "Login ou mot de passe incorrect") // si la reponse du serveur donne une erreur
      {
        this.message_warning = this.requete.erreur; // le message_warning devient le message d'erreur
        this.presentAlert(); // on active la fonction pour mettre l'alerte
        this.login = ""; // on remet le champ login vide
        this.password = ""; // on remet le champ password vide
      }
      else // sinon si la reponse du serveur est bonne cad on a marqué un login et password correcte alors:
      {
        // on envoie le login et password aux tabs pour qu'ils recupérent la liste d'article avec notre login et password
        let navigationExtras: NavigationExtras = {
          state:
          {
            login_classe: this.login,
            password_classe: this.password
          }
        }
        this.router.navigate(['tabs'], navigationExtras);
        console.log("bye modal");
        this.modalCtrl.dismiss();
      }
    });

  }

  async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Connexion échouée',
      subHeader: 'Erreur:',
      message: this.message_warning,
      buttons: ['OK']
    });

    await alert.present();
  }

提前致谢，我正在等待您的回复

Answer 1

modalController 未在状态下发送数据。所以你需要等很久你的modalController返回数据。

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

const datafromModal = await modal.onDidDismiss();  // wait till modal not returned the data

//then call here function
 if (this.reponse_connexion(this.login,this.password) == true){
 // logic part
}

并且需要以模式关闭而不是路由器状态传递数据

 let data = { 'foo': 'bar' };
 this.viewCtrl.dismiss(data);

并且可以在 datafromModal 变量的标签页中访问