問題描述

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

我從 ionic 網站獲得了這個鏈接，上面說我們可以顯示字符串.

這個想法是使用 Ionic2 的 ModalController，但使用 ugly 和小的解決方法來修改該模式的樣式，而不影響應用程序的其他模式.

當頁面顯示時(即使它被用作模式頁面)，組件的名稱用于在 html 代碼中的 元素中設置一個類.我們將使用該類來設置模態框的樣式，使其看起來像 Toast，但要利用頁面來顯示其內容，以便我們可以放置圖像和其他一些東西.

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

<ion-header><離子導航欄><ion-title>ModalController 演示</ion-title></離子導航欄></離子頭><離子含量填充><h5>具有自定義大小的模態控制器</h5><button(click)="presentCustomModal()">打開自定義Modal</button><button(click)="presentDefaultModal()">打開默認模態</button></離子含量>

并使用以下代碼:

從'@angular/core'導入{組件}；導入 { NavController, ModalController, ViewController } from 'ionic-angular';@零件({templateUrl: 'build/pages/modal-controller-custom-size/modal-controller-custom-size.html',})導出類 ModalControllerCustomSizePage {構造函數(私有 navCtrl:NavController，私有 modalCtrl:ModalController){}presentCustomModal() {讓 customModal = this.modalCtrl.create(CustomModalPage);customModal.onDidDismiss(() => {//做你想做的...});//呈現模態customModal.present();}presentDefaultModal() {讓 defaultModal = this.modalCtrl.create(DefaultModalPage);defaultModal.onDidDismiss(() => {//做你想做的...});//呈現模態defaultModal.present();}}/* ********************自定義模態************************ */@零件({模板:'<離子頭>'+'<ion-navbar dark>'+'<ion-title>我的自定義模態</ion-title>'+'<離子按鈕結束>'+'<button (click)="dismiss()">關閉</button>'+'</離子按鈕>'+'</離子導航欄>'+'</離子頭>'+'<離子含量填充>'+'<離子網格>'+'<離子行>'+'<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>'+'</離子行>'+'</離子網格>'+'</離子含量>',})類 CustomModalPage {構造函數(公共 viewCtrl:ViewController){}公開解雇(){this.viewCtrl.dismiss();}}/* ********************默認模態************************ */@零件({模板:'<離子頭>'+'<離子導航欄>'+'<ion-title>默認模式</ion-title>'+'<離子按鈕結束>'+'<button (click)="dismiss()">關閉</button>'+'</離子按鈕>'+'</離子導航欄>'+'</離子頭>'+'<離子含量填充>'+'<h5>模態內容...</h5>'+'</離子含量>',})類 DefaultModalPage {構造函數(公共 viewCtrl:ViewController){}公開解雇(){this.viewCtrl.dismiss();}}

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

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

.custom-modal-page {高度:270px；位置:絕對；頂部:計算(100% - 270px)；離子含量{背景顏色:#333；顏色:#eee；}}

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

I am new to ionic2 development. Trying to show a toast message to the user, However using ionic2 framework am able to display only string message's in the toast view, I want to display a image and few other string in the form of customized view. How can i do that.

I got this link from ionic site which says we can display string's. http://ionicframework.com/docs/v2/api/components/toast/ToastController/

Any suggestions ?

I've been playing around with this, and I think I found a workaround, but please notice that this is just that, a workaround, and may cause some other things to break somehow.

The final result is something like this:

The idea is to use Ionic2's ModalController but using an ugly and small workaround to modify the styles of that modal without affecting other modals of the app.

When a page is shown (even though if it's used as a modal page) the Component's name is used to set a class in the <ion-page> element in the html code. We're going to use that class to style a modal to make it look like a Toast, but taking advantage of using a page for it's content so we can put an image and some other things.

For this demo, I've created a page with two buttons:

<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>

And with the following code:

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();
    }
}

Please notice that I included the code of the two components that are going to be used as modals in the same page, just to make the code easier to read. The recommended approach is to put every Component in its own .ts file.

Until now there's nothing special in that code, is just a page that opens two different (but full-page) modals. The magic will be done by using these style rules:

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

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

Since we're using the .custom-modal-page class, those changes will only affect the custom modal and not the default one.

這篇關于如何使用 ionic2 框架創建或自定義 Toast 視圖的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！