1

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

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

有什么建议么 ？

4

1 回答 1

1

我一直在玩这个，我想我找到了一个解决方法，但请注意这只是一个解决方法，并且可能会导致其他一些事情以某种方式中断。

最终结果是这样的：

在此处输入图像描述

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

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

于 2016-09-11T12:01:46.683 回答