在Ionic 2中从页面中删除模态

时间:2018-04-02 13:06:13

标签: angularjs ionic-framework ionic2

我想删除已从上一页添加到导航堆栈的模态。例如,我nav.push用户到一个页面然后从该页面用户打开一个模态。我在页面内部有一个Observable.timer,当倒计时到达0时触发nav.push,所以当发生这种情况时,我想关闭触发时打开的所有模态?如何关闭从特定页面打开的模态?

this.navCtrl.push(EndPage).then(() => {
  const indexModal = this.viewCtrl.index;
  this.navCtrl.remove(indexModal + 1);
  this.navCtrl.remove(indexModal );
});

Observable.timer结束后模态已关闭

  answerModal : any;

  ngOnInit() {
    this.countDown = Observable.timer(0, this.tick)
      .take(this.counter)
      .map(() => --this.counter).finally(() => this.endTimer());
      //this.countDown.subscribe(() => { }); 
  }

  endTimer()
  {
       this.answerModal.dismiss();
  }

  // user clicks to create modal
  newmodal() { 
    this.answerModal = this.modalCtrl.create(ModalanswersPage);
    this.answerModal.present();
    this.answerModal.onDidDismiss(data=>{ 
        console.log("closed"); 
    });
  }

1 个答案:

答案 0 :(得分:0)

我建议把计数器放在模态中。该模型必须负责关闭ViewController组件的模态。这样你就必须像现在一样在主页面中打开模态。

  // user clicks to create modal
  newmodal() { 
    this.answerModal = this.modalCtrl.create(ModalanswersPage);
    this.answerModal.present();
    this.answerModal.onDidDismiss(data=>{ 
        console.log("closed"); 
    });
  }

然后你的模态需要实现计时器和解雇。

<强> YourModal.ts

  constructor(public navCtrl: NavController, public viewCtrl: ViewController) {}      

  ngOnInit() {
     this.countDown = Observable.timer(0, this.tick)
          .take(this.counter)
          .map(() => --this.counter).finally(() => this.endTimer());
          //this.countDown.subscribe(() => { }); 
  }

  endTimer()
  {
       if(this.countDown)
           this.countDown.unsubscribe();
       this.viewCtrl.dismiss(false);
  }

您可以在上面的代码中看到我正在调用ViewController组件中的dismiss方法。因为你正在模态中移动计时器,所以不要忘记取消订阅你的观察者。

希望它有所帮助。如果您有疑问,请随时告诉我。