angular - วิธีใช้ HTML เพื่อเพิ่มบรรทัดใหม่ในทอสต์ของ Ionic2?

ฉันพยายามใส่บรรทัดใหม่เข้าไปในข้อความป๊อปอัพ

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

แต่จะแสดงเฉพาะแท็กเท่านั้น ฉันจะทำอย่างไรให้มีบรรทัดใหม่ (และแท็ก HTML อื่นๆ) ในข้อความทอสต์ได้?

คำตอบ #1

การแสดงผลแท็ก HTML ไม่สามารถทำได้ที่นี่

ในตอนนี้ไม่มีวิธีใดที่จะดูแท็ก HTML ในข้อความ toast เนื่องจากวิธีที่เทมเพลตของคอมโพเนนต์ toast เรนเดอร์ message โดยใช้วงเล็บคู่นูนของการแทรกค่า

การอ้างอิงในแหล่งที่มาของ 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;
}

คำตอบ #2

ฉันเคยต้องแสดงทอสต์ที่ซับซ้อนมากขึ้นครั้งหนึ่ง (มีรูปภาพและข้อความบางส่วน) และฉันก็ทำได้โดยใช้โมดอลและกฎสไตล์บางอย่าง ผลลัพธ์สุดท้ายคือ:

ฉันทำมันโดยใช้ Ionic รุ่นเบต้าในเวลานั้น แต่โค้ดที่จะทำให้มันทำงานใน 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;
    }
}