我已將以下代碼從 Ionic 3 遷移到 Ionic 5 const alert = await this.alertCtrl.create({ subHeader: "About" + " <b>" + this.user.name + "</b>", message: "Test Messgae", buttons: [ { text: 'Close', role: 'cancel', handler: () => { } } ] }); await alert.present();在 Ionic 3 中，用戶名以粗體顯示，但在 Ionic 5 中，HTML 標簽不起作用，< b > 標簽顯示為文本。請建議我如何在 IONIC 5 中設置警報中的文本樣式。
3 回答
侃侃無極
TA貢獻2051條經驗 獲得超10個贊
一句警告
由于 Ionic 會清理傳遞的字符串以避免不安全的 html 注入，因此會出現 html 標簽。攻擊者可以利用不安全的 html 來協調 XSS 攻擊。
智慧大石
TA貢獻1946條經驗 獲得超3個贊
以下內容對我有用，因為我使用的是 IONIC 7。
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),
AppRoutingModule,
HttpClientModule
],
啟用內部 HTML 模板?？赡苄枰?，因為您的 HTML 正在呈現為純字符串/文本。啟用此功能后，我使用的所有 HTML 標簽都會正確呈現
希望這可以幫助
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
subHeader可以使用自定義 CSS 類加粗。在此示例中，即alertCustomClass.
主頁.ts
async presentAlertConfirm() {
const alert = await this.alertController.create({
header: 'About ' + this.test,
subHeader: this.test,
message: 'About ' + '<strong>' + this.test + '</strong>',
cssClass: 'alertCustomClass',
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
handler: () => {
console.log('Confirm Okay');
}
}
]
});
await alert.present();
}
全局.scss
.alertCustomClass {
.alert-sub-title {
font-weight: bold;
}
}
另外，您可以像這樣message粗體使用：<strong>
async presentAlertConfirm() {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'About ' + '<strong>' + this.user.name + '</strong>',
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
handler: () => {
console.log('Confirm Okay');
}
}
]
});
await alert.present();
}
header默認為粗體 ( font-weight:500;)。
...
header: 'About ' + this.user.name,
message: ...,
buttons: ,,,.
...
- 3 回答
- 0 關注
- 229 瀏覽
添加回答
舉報
0/150
提交
取消