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

【问题标题】：How to use HTML for adding new lines in Ionic2 toasts?如何使用 HTML 在 Ionic2 吐司中添加新行？
【发布时间】：2016-12-14 21:08:57
【问题描述】：

我尝试在 toast 消息中添加一些新行。

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

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

【问题讨论】：

标签： html angular typescript ionic2 toast

【解决方案1】：

此处无法呈现 HTML 标记

由于 toast 组件的模板使用 double-curly braces of interpolation 呈现 message 的方式，目前无法查看 toast 消息中的 HTML 标记

IonicFramework 中的参考来源：File/Commit

交替，在消息正文中为任何 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;
}

【讨论】：

【解决方案2】：

我需要展示一次更复杂的 toast（带有图像和一些文本），我通过使用模式和一些样式规则来做到这一点。这是最终结果：

当时我是通过使用 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;
    }
}

【讨论】：

我按照您的方式进行操作，但无法单击父视图上的组件。（例如，您的示例中的“打开自定义模式”/“打开默认模式”按钮）我该如何实现？