如何在页面重定向上关闭离子选择？答案

【问题标题】：How to close Ionic selects on page redirect?如何在页面重定向上关闭离子选择？
【发布时间】：2018-08-31 19:02:24
【问题描述】：

如果应用在 60 秒内未使用，我将使用 ng-idle 将用户重定向回主屏幕。

我遇到的问题是，如果在重定向时打开了离子选择弹出框，这些弹出框仍会显示在屏幕上，直到手动关闭它们为止。有什么方法可以检测到任何打开的弹出框并全部关闭吗？

我看到您可以像这样引用 ion-select：

@ViewChild('myselect') select: Select;

但我的选择字段是在表单中动态设置的，因此无法知道将设置多少个选择字段。

我还尝试使用 javascript 手动删除 <ion-alert></ion-alert> 元素，但由于某种原因，这会阻止用户在再次开始使用该应用程序时打开 ion-select 弹出框。

感谢您的帮助。

【问题讨论】：

如果你有动态数量的字段，你可以使用ViewChildren而不是ViewChild。
谢谢，我不知道它存在！我现在已经开始工作了，很快就会发布我的答案，以防它帮助其他人。
太好了，很高兴听到它有帮助！ :)

标签： angular cordova ionic-framework ionic3

【解决方案1】：

感谢 Alex 的评论，这就是我解决问题的方法：

进口

import { QueryList, ViewChildren } from '@angular/core';
import { Select } from 'ionic-angular';

ViewChildren 设置

@ViewChildren(Select) viewChildren: QueryList<Select>;

离开页面后，关闭所有打开的离子选择字段。

ionViewWillLeave() {
    this.viewChildren.map((view:any) => {
      view.close();
    });
  }

【讨论】：

【解决方案2】：

如果有人在 Ionic v5 中寻找解决方案，这里是解决方案。

let backDrop = document.querySelector('ion-backdrop');

if (backDrop) {
  backDrop.click();
}

由于 IonSelect 在 v4 和 v5 中没有 close()，这是一种可能的方式。

【讨论】：

【解决方案3】：

添加到@Atheesh27 答案：

如果您打开了很多离子选择模式，您可以通过重复 backDrop.click() 事件来关闭所有模式，然后等待几秒钟以关闭下一个，如下所示：

HTML

  <ion-select  (ionCancel)="cancelarSeleccion()" >
        
          <ion-select-option > option </ion-select-option>
        </section>
    </ion-select>

     delay(n){
    return new Promise(function(resolve){
        setTimeout(resolve,n*1000);
    });
  }


async cancelarSeleccion(){

    
    let backDrop = document.querySelector('ion-backdrop');
    backDrop.click();

    await this.delay(.1);

    let backDrop1 = document.querySelector('ion-backdrop');
    backDrop1.click();

    await this.delay(.1);

    let backDrop2 = document.querySelector('ion-backdrop');
    backDrop2.click();


  }

【讨论】：