如何使用 ionic2 框架創建或自定義 Toast 視圖

Question

我是 ionic2 開發的新手。 試圖向用戶顯示 Toast 消息，但是使用 ionic2 框架只能在 toast 視圖中顯示字符串消息，我想以自定義視圖的形式顯示圖像和其他一些字符串。 我怎樣才能做到這一點。

我從 ionic 站點得到了這個鏈接，它說我們可以顯示字符串。 http://ionicframework.com/docs/v2/api/components/toast/ToastController/

有什么建議 ？

Answer 1

我一直在玩這個，我想我找到了一個解決方法，但請注意，這只是一個解決方法，可能會導致其他一些事情以某種方式中斷。

最終的結果是這樣的：

這個想法是使用 Ionic2 的ModalController但使用一個丑陋而小的解決方法來修改該模態的樣式而不影響應用程序的其他模態。

當頁面顯示時（即使它被用作模式頁面），組件的名稱用於在 html 代碼的<ion-page>元素中設置一個類。 我們將使用該類為模態設置樣式，使其看起來像 Toast，但利用頁面作為其內容的優勢，因此我們可以放置圖像和其他一些東西。

對於這個演示，我創建了一個帶有兩個按鈕的頁面：

<ion-header>

  <ion-navbar>
    <ion-title>ModalController Demo</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
    <h5>ModalController with custom size</h5>

    <button (click)="presentCustomModal()">Open Custom Modal</button>

    <button (click)="presentDefaultModal()">Open Default Modal</button>

</ion-content>

並使用以下代碼：

import { Component } from '@angular/core';
import { NavController, ModalController, ViewController } from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/modal-controller-custom-size/modal-controller-custom-size.html',
})
export class ModalControllerCustomSizePage {

    constructor(private navCtrl: NavController, private modalCtrl: ModalController) {

    }

    presentCustomModal() {
        let customModal = this.modalCtrl.create(CustomModalPage);

        customModal.onDidDismiss(() => {
            // Do what you want ...
        });

        // Present the modal
        customModal.present();
    }

    presentDefaultModal() {
        let defaultModal = this.modalCtrl.create(DefaultModalPage);

        defaultModal.onDidDismiss(() => {
            // Do what you want ...
        });

        // Present the modal
        defaultModal.present();
    }

}

/* ********************
    Custom modal 
********************* */
@Component({
    template:   '<ion-header>' +
                    '<ion-navbar dark>' +
                        '<ion-title>My custom modal</ion-title>' +
                        '<ion-buttons end>' +
                            '<button (click)="dismiss()">Close</button>' +
                        '</ion-buttons>' +
                    '</ion-navbar>' +
                '</ion-header>' +
                '<ion-content padding>' +
                    '<ion-grid>' +
                        '<ion-row>' +
                            '<ion-col width-50><img src="http://placehold.it/150x150"/></ion-col>' +
                            '<ion-col width-50>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</ion-col>' +
                        '</ion-row>' +
                    '</ion-grid>' +
                '</ion-content>',
})
class CustomModalPage {

    constructor(public viewCtrl: ViewController) {

    }

    public dismiss() {
        this.viewCtrl.dismiss();
    }
}

/* ********************
    Default modal 
********************* */
@Component({
    template:   '<ion-header>' +
                    '<ion-navbar>' +
                        '<ion-title>Default modal</ion-title>' +
                        '<ion-buttons end>' +
                            '<button (click)="dismiss()">Close</button>' +
                        '</ion-buttons>' +
                    '</ion-navbar>' +
                '</ion-header>' +
                '<ion-content padding>' +
                    '<h5>Modal content...</h5>' +
                '</ion-content>',
})
class DefaultModalPage {

    constructor(public viewCtrl: ViewController) {

    }

    public dismiss() {
        this.viewCtrl.dismiss();
    }
}

請注意，我在同一頁面中包含了將用作模態的兩個組件的代碼，只是為了使代碼更易於閱讀。 推薦的方法是將每個Component放在自己的 .ts 文件中。

到目前為止，該代碼沒有什么特別之處，只是一個打開兩個不同（但整頁）模態的頁面。 魔術將通過使用這些樣式規則來完成：

.custom-modal-page {
    height: 270px;
    position: absolute;
    top: calc(100% - 270px);

    ion-content {
        background-color: #333;
        color: #eee;
    }
}

由於我們使用.custom-modal-page類，這些更改只會影響自定義模式而不是默認模式。