仅显示一次 AlertController - Ionic 2 AngularJS 2答案

【问题标题】：Show AlertController only one time - Ionic 2 AngularJS 2仅显示一次 AlertController - Ionic 2 AngularJS 2
【发布时间】：2017-02-24 22:02:34
【问题描述】：

我在我的项目中添加了一个非常基本的AlertController，以便让用户快速了解该应用程序，但由于其目的纯粹是为了欢迎，我想展示一次（第一次应用程序已打开），这样未来的时间就没有了。

我将它包含在ionViewWillEnter() 方法中：

ionViewWillEnter() {
    let alert = this.alertCtrl.create({
      title: 'Title',
      subTitle: 'Subtitle',
      message: 'Message',
      buttons: ['OK'],
      enableBackdropDismiss: false
    });
    alert.present();
  }

作为跨平台开发的初学者，这是我第一次遇到这个问题，或者更确切地说，在 Android 中称为 SharedPreferences。我查看了AlertController 的官方文档，但对buttons 中的handler 没有太多了解。

这是我在 Android 上为保存首选项所做的：

mPrefs = PreferenceManager.getDefaultSharedPreferences(this);

    Boolean welcomeScreenShown = mPrefs.getBoolean(welcomeScreenShownPref, false);

    if (!welcomeScreenShown) {

       AlertDialog.Builder(this)
          .setTitle("Title")
          .setMessage("Message")
          .setPositiveButton(R.string.ok, new DialogInterface.OnClickListener(){
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
            }
        }).show();
        SharedPreferences.Editor editor = mPrefs.edit();
        editor.putBoolean(welcomeScreenShownPref, true);
        editor.commit(); // Very important to save the preference
    }

【问题讨论】：

请澄清你的问题，就它所写的而言，不可能说你被问到了。

标签： angularjs angular ionic-framework dialog ionic2

【解决方案1】：

就像其他 SO 用户提到的那样，您可以使用 Ionic Storage 来执行此操作。首先将其添加到您的NgModule 声明中的providers 列表中（例如，在src/app.module.ts 中）：

import { Storage } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    Storage
  ]
})
export class AppModule {}

然后您需要将它注入到显示警报的页面中并像这样使用它：

import { Component, Injector } from '@angular/core';
import { Storage } from '@ionic/storage';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    constructor(..., private storage: Storage) {
        // ...
    }

    ionViewWillEnter() {
      this.storage.get('alreadyShown').then((alreadyShown) => {
         if(!alreadyShown) {
           this.storage.set('alreadyShown', true);
           this.showWelcomeAlert();
         }
      });
    }

    private showWelcomeAlert(): void {
      let alert = this.alertCtrl.create({
        title: 'Title',
        subTitle: 'Subtitle',
        message: 'Message',
        buttons: ['OK'],
        enableBackdropDismiss: false
      });
      alert.present();
    }
}

【讨论】：

目前src/app.module.ts 看起来像这样：providers: [provide: ErrorHandler, useClass: IonicErrorHandler}]。当我添加存储providers: [Storage, provide: ErrorHandler, useClass: IonicErrorHandler}] 时，我得到一个运行时错误：由：没有存储提供者！。它不适用于仅providers: [Storage]，因为未显示对话框
我想你错过了一个{，应该是providers: [Storage, { provide: ErrorHandler, useClass: IonicErrorHandler}]
完美！我看不到它工作，因为我已经在浏览器上部署。我试过 AVD，效果很好！非常感谢；）

【解决方案2】：

您可以保存在已显示 AlertController 的持久存储中。

例如，您可以使用Secure Storage 来存储在显示 AlertController 时设置的变量。

【讨论】：

【解决方案3】：

你可以使用离子存储here

然后确保设置一个值，指示警报已显示在警报的处理程序中。

【讨论】：