Ionic 4离子作用控制器可防止在单击按钮时自动关闭

时间:2019-07-12 14:45:36

标签: ionic-framework ionic4

我试图显示可作为操作表使用的语言列表。但是,一旦按下语言按钮,操作表就会自动关闭。有什么可能的方法可以防止在单击ActionsheetButton时自动关闭ion-action-sheet控制器。

async showChangeLangAlert() {
    const actionSheet = await this.actionSheet.create(
      {
        header: this.translateText('Select language'),
        buttons: this.getLanguageInputTypes(),
        cssClass: 'confirmation-popup select-lang',
        backdropDismiss: true,
        mode: 'md'
      }
    );

    actionSheet.present();

    actionSheet.onWillDismiss().then(res => {
      console.log(res);
      event.preventDefault();
    });

    actionSheet.onDidDismiss().then(res => {
      this.langChoosen.next(this.selectedLanguage);
    });
  }

private getLanguageInputTypes(): ActionSheetButton[] {
    if (this.selectedLanguage === undefined) {
      this.selectedLanguage = 'en';
    }
    return [
      {
        text: this.translateText('English'),
        icon: (this.selectedLanguage.toLowerCase() === 'en') ? 'radio-button-on' : 'radio-button-off',
        cssClass: (this.selectedLanguage.toLowerCase() === 'en') ? 'active-option' : '',
        handler: () => {
          this.selectedLanguage = 'en';
        }
      },
      {
        text: this.translateText('German'),
        icon: (this.selectedLanguage.toLowerCase() === 'de') ? 'radio-button-on' : 'radio-button-off',
        cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
        handler: () => {
          this.selectedLanguage = 'de';
        }
      },
      {
        text: this.translateText('Select'),
        icon: 'checkmark-circle',
        cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
        handler: () => {
          this.setSelectedLanguage();
        }
      }
        ];
      }

private setSelectedLanguage() {
 // close the action-sheet here
}

我想实现动作表控制器的手动关闭,但是单击任何动作按钮时,它将自动关闭。我缺少什么或是否有任何变通办法将警报窗口显示为操作表?

1 个答案:

答案 0 :(得分:-2)

backdropDismiss 描述 如果设置为true,则单击背景幕时将取消该操作表。

属性背景关闭 布尔型 默认为真

backdropDismiss:false