如何使用 ionic2 框架创建或自定义 Toast 视图

Question

我是 ionic2 开发的新手。试图向用户显示吐司消息，但是使用 ionic2 框架只能在吐司视图中显示字符串消息，我想以自定义视图的形式显示图像和其他一些字符串。我该怎么做。

我从 ionic 网站上得到了这个 link，它说我们可以显示字符串。 http://ionicframework.com/docs/v2/api/components/toast/ToastController/

有什么建议吗？

Answer 1

我一直在研究这个问题，我想我找到了一个解决方法，但请注意 这只是一个解决方法，并且可能会导致其他一些东西以某种方式破坏。

最后的结果是这样的：

想法是使用 Ionic2 的 ModalController 但使用丑陋和小的解决方法来修改该模态的样式而不影响应用程序的其他模态。

显示页面时（即使它用作模态页面）组件的名称用于在 html 代码的 <ion-page> 元素中设置 class .我们将使用它 class 来设置模式样式，使其看起来像 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 class，这些更改只会影响自定义模式，而不影响默认模式。

如何使用 ionic2 框架创建或自定义 Toast 视图

How to create or customize a Toast view using ionic2 framework

javascript

typescript

ionic2

ionic3

angular