AlertController

警報是一個對話框，向用戶顯示信息或使用輸入收集用戶的信息。 應用程式內容上方會顯示快訊，使用者必須手動關閉快訊，才能恢復與應用程式的互動。 它還可以選擇具有標題，子標題和消息。

可以在創建方法的第一個參數中傳遞所有警報的選項：create（opts）。 否則，警報的實例具有添加選項的方法，例如setTitle（）或addButton（）。

Alert Buttons

在按鈕陣列中，每個按鈕都包含其文本的屬性，以及可選的處理程序。 如果處理程序返回false，那么當單擊按鈕時，該警報將不會自動被關閉。 所有按鈕將按照從左到右添加到按鈕陣列的順序顯示。 注意：最右邊的按鈕（陣列中的最后一個）是主按鈕。

或者，角色屬性可以添加到按鈕，如取消。 如果其中一個按鈕上有取消角色，則如果通過點擊背景來關閉警報，則會從具有取消角色的按鈕中觸發處理程序。

Alert Inputs

alert還可以包括幾個不同的輸入，其數據可以傳回應用程序。 輸入可以作為提示用戶提供信息的簡單方法。 單選框，復選框和文本輸入都被接受，但不能混合。 例如，alert可以具有所有單選按鈕輸入或所有復選框輸入，但相同的alert不能混合單選和復選框輸入。 但請注意，不同類型的“文本”“輸入可以混合，如URL，電子郵件，文本等。如果您需要一個不符合alert準則的復雜表單UI，那么我們建議構建表單 在一個模態代替。

Usageimport { AlertController } from 'ionic-angular'; constructor(private alertCtrl: AlertController) { } //alert showalert(){let alert=this.alertCtrl.create({title:"密碼不對",subTitle:"請重新輸入",buttons:["確定"]});alert.present(); } presentConfirm() {//普通彈框let alert = this.alertCtrl.create({title: '確認信息',message: '請確認是否要繼續？',buttons: [{text: '否',role: 'cancel',handler: () => {console.log('取消繼續');}},{text: '繼續',handler: () => {console.log('確認繼續');}}]});alert.present(); } presentPrompt() {//確認彈框let alert = this.alertCtrl.create({title: '登錄',inputs: [{name: 'username',placeholder: '用戶名'},{name: 'password',placeholder: '密碼',type: 'password'}],buttons: [{text: '取消',role: 'cancel',handler: data => { //data會自動獲取input里面的值console.log('Cancel clicked');}},{text: '登錄',handler: data => {//回調為假時彈框將保持不消失if (!data.username&&!data.password){console.log("go");console.log(data);// logged in!} else {// invalid loginreturn false;}}}]});alert.present();//切記 } } <p (click)="showalert()">alert普通彈框</p> <p (click)="presentConfirm()">alert確認彈框</p> <p (click)="presentPrompt()">alert提示彈框</p>

效果自行運行。

Alert options

屬性 類型 描述

title string 彈框的標題

subTitle string 彈框副標題

message string 彈框顯示內容

cssClass string 彈框自定義樣式類名

inputs array 彈框內的input（）

buttons array 彈框上的按鈕

enableBackdropDismiss boolean 是否應該通過點擊背景來銷毀alert。 默認值為true。

Input options

Property Type Description

type string input 的類型 text, tel, number, etc.

name string The name for the input.

placeholder string The input’s placeholder (for textual/numeric
inputs)

value string The input’s value.

label string The input’s label (only for radio/checkbox inputs)

checked boolean Whether or not the input is checked.

id string The input’s id.

Button options

Property Type Description

text string 按鈕上顯示的字

handler any 點擊按鈕是觸發執行的函數

cssClass string 自定義樣式類

role string The buttons role, null or cancel.角色

Dismissing And Async Navigation

取消和異步導航

在關閉alert后，應用程序可能還需要根據處理程序的邏輯轉換到另一個頁面。 然而，由于在大致相同的時間觸發了多個轉換，導航控制器很難對多個可能被異步啟動的轉換進行動畫生成動畫。 對于alert，這意味著在同一個導航上開啟新的轉換之前先等待alert彈框先完成轉換。

在下面的示例中，在單擊alert彈框按鈕后，handler 回調函數將等待函數內異步操作完成，然后使用pop將頁面返回在同一個頁面堆棧。 潛在的問題是異步加載操作可能在alert轉換完成之前完成。（也就說alert轉換還沒有完成，異步加載就已經完成了） 在這種情況下，最好先確保alert已完成過渡，然后開始下一個轉換。

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，所以警報不會自動關閉。 相反，您現在可以完全控制警報完成轉換的時間，以及在開始新的轉換之前等待警報完成轉換的能力。

總結

以上是生活随笔為你收集整理的ionic的Alert弹出框详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。