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

问题描述 投票:0回答:1

我正在尝试显示作为操作表可用的语言列表。但是,一旦按下语言按钮,操作表就会自动关闭。有没有什么方法可以防止在单击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
}

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

ionic-framework ionic4
1个回答
0
投票

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

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

backdropDismiss:false
© www.soinside.com 2019 - 2024. All rights reserved.