如何传递字符串并保留格式，例如<strong>

Question

我有一个Angular表单，它在成功时会路由到一个显示请求成功的新组件。为了传递信息，我使用history.state.data，它运行良好，但我不能传递带格式的值。

我使用的代码看起来像这个

if (res.Success === true) {
let email = this.form.value.email
let message = `Your preference for <strong>${email}</strong> has been successfully updated !`
this._router.navigate(['success'], {state : {data : {message: message}}}) 
}

然后在另一个组件上，我读取了消息

this.message = history.state.data?.message

和在模板中

<p style="text-align: center;">{{message}}</p>

但是我的输出是这样的，我如何才能使实际提供格式化还是打印出来？

Your preference for <strong>[e-mail]</strong> has been successfully updated !

Answer 1

必须使用innerHtml属性。否则，它将把它呈现为文本。

<p style="text-align: center;" [innerHtml]="message"></p>

请参阅：如何在Angular 4+中渲染带有html标记的字符串？