如何使用HTML在Ionic2吐司中添加新行？

Question

我嘗試將一些新行添加到祝酒詞中。

    let toast = this.toastCtrl.create({
        message: "First line<br />Second line.",
        duration: 5000,
        dismissOnPageChange: true
    });
    toast.present();

但它僅顯示標簽。 如何將新行（和其他HTML標記）添加到Toast消息中？

Answer 1

此處無法渲染HTML標簽

由於Toast組件的模板使用插值的雙彎括號來呈現message ，因此到目前為止，無法查看Toast消息中的HTML標簽。

IonicFramework中的參考源： 文件 / 提交

或者 ，在郵件正文中為任何HTML元素添加新行

您可以使用\\x0A或\\n以及style="white-space: pre-line;"

解

let toast = this.toastCtrl.create({
    message: "First line<br />Second line.",
    duration: 5000,
    dismissOnPageChange: true,
    cssClass: "className",
});
toast.present();

.className{
   white-space: pre-line;
}

Answer 2

我需要顯示一次更復雜的吐司（帶有圖像和一些文本），並且通過使用模態和一些樣式規則來做到這一點。 這是最終結果：

那時我是通過使用Ionic beta來實現的，但是使其在RC中工作的代碼應該幾乎相同：

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

樣式：

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

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