Question

我尝试将一些新行添加到Toast消息中。

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

但它只显示标签。如何将新行（和其他HTML标记）添加到Toast消息中？

Answer 1

此处无法呈现HTML代码

由于toast组件的模板使用double-curly braces of interpolation

呈现message的方式，目前无法在Toast消息中查看HTML标记

IonicFramework中的参考资料来源：File / Commit

Alteratively ，在邮件正文中为任何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;
    }
}

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

2 个答案: