从 Ionic 2 的页面中删除模式答案

【问题标题】：Remove modal from page in Ionic 2从 Ionic 2 的页面中删除模式
【发布时间】：2018-04-02 13:06:13
【问题描述】：

我想从上一页删除已添加到导航堆栈的模式。例如，我 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"); 
    });
  }

【问题讨论】：

不太清楚你在尝试什么......你在别处打开一个模态然后推送一个页面？
我正在从一个页面打开一个模态，非常直接的 modal.present()。我想从调用它的页面中关闭此模式
modal.dismiss()...
只有当您从模态页面内部调用时才有效，而不是从调用模态的页面调用
由于您在 ngOninit 中添加计时器，因此可能是在创建之前调用了模态关闭，因此在 endTimer 中有一个 if 条件。 this.answerModal && this.answerModal.dismiss();

标签： angularjs ionic-framework ionic2

【解决方案1】：

我建议将计数器放在模态框内。模型必须负责使用 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 方法。因为您在模态框内移动计时器，所以不要忘记取消订阅您的 observables。

希望对您有所帮助。如果您有任何疑问，请随时告诉我。

【讨论】：