警告框控制器

警报是一个对话框，向用户显示信息或使用输入收集用户的信息。 应用程式内容上方会显示快讯，使用者必须手动关闭快讯，才能恢复与应用程式的互动。 它还可以选择具有 title ，subTitle 和 message。

您可以在创建方法的第一个参数中传递所有警报的选项：create（opts）。 否则，警报的实例具有添加选项的方法，例如setTitle（）或addButton（）。

警告按钮

在 buttons 阵列中，每个按钮都包含其 text 的属性，以及可选的 handler。 如果处理程序返回false，那么当单击按钮时，该警报将不会自动被关闭。 所有按钮将按照从左到右添加到 buttons 阵列的顺序显示。 注意：最右边的按钮（阵列中的最后一个）是主按钮。

或者，role 属性可以添加到按钮，如 cancel。 如果其中一个按钮上有 cancel 角色，则如果通过点击背景来关闭警报，则会从具有取消角色的按钮中触发处理程序。

警告输入

警报还可以包括几个不同的输入，其数据可以传回应用程序。 输入可以作为提示用户提供信息的简单方法。 收音机，复选框和文本输入都被接受，但不能混合。 例如，警报可以具有所有单选按钮输入或所有复选框输入，但相同的警报不能混合无线电和复选框输入。 但请注意，不同类型的“文本”“输入可能会混合，如网址，电子邮件，文本等。如果您需要一个不符合警报指导原则的复杂表单UI，那么我们建议构建表单 在一个模态代替。

使用

constructor(private alertCtrl: AlertController) {

}

presentAlert() {
  let alert = this.alertCtrl.create({
    title: 'Low battery',
    subTitle: '10% of battery remaining',
    buttons: ['Dismiss']
  });
  alert.present();
}

presentConfirm() {
  let alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: 'Do you want to buy this book?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });
  alert.present();
}

presentPrompt() {
  let alert = this.alertCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'username',
        placeholder: 'Username'
      },
      {
        name: 'password',
        placeholder: 'Password',
        type: 'password'
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Login',
        handler: data => {
          if (User.isValid(data.username, data.password)) {
            // logged in!
          } else {
            // invalid login
            return false;
          }
        }
      }
    ]
  });
  alert.present();
}

效果：

静态成员

config

create(opts)

用标题，输入和按钮显示警报

高级

警告选项

Input options

按钮选项

取消和异步导航

在关闭警报后，应用程序可能还需要根据处理程序的逻辑转换到另一个页面。 然而，由于在大致相同的时间触发了多个转换，导航控制器很难对可能异步启动的多个转换进行动画生成动画。 这在Nav Transition Promises部分进一步描述。 对于警报，这意味着最好先在同一导航控制器上开始新的转换之前等待警报完成转换。

在下面的示例中，在单击警报按钮后，其处理程序将等待异步操作完成，然后使用弹出窗口在同一个堆栈中返回页面。 潜在的问题是异常操作可能在警报甚至完成转换之前已经完成。 在这种情况下，最好先确保警报已完成过渡，然后开始下一个转换。

let alert = this.alertCtrl.create({
  title: 'Hello',
  buttons: [{
    text: 'Ok',
    handler: () => {
      // user has clicked the alert button
      // begin the alert's dismiss transition
      let navTransition = alert.dismiss();

      // start some async method
      someAsyncOperation().then(() => {
        // once the async operation has completed
        // then run the next nav transition after the
        // first transition has finished animating out

        navTransition.then(() => {
          this.nav.pop();
        });
      });
      return false;
    }
  }]
});

alert.present();

请注意，处理程序返回false。 按钮处理程序的一个功能是，当他们点击按钮时，他们会自动关闭警报，但是我们需要更多的关于转换的控制。 因为处理程序返回false，所以警报不会自动关闭。 相反，您现在可以完全控制警报完成转换的时间，以及在开始新的转换之前等待警报完成转换的能力。

Sass Variables

• All

Sass Variables

• iOS

Sass Variables

• Material Design

Sass Variables

• Windows Platform