使用插值時添加換行符

我有一些提示消息框的html。使用插值，我可以重新使用相同的html來顯示多個不同的警報消息。它看起來像這樣：{{ myAlertMessage }}使用插值時添加換行符

現在我想顯示一個包含換行符的更長的警報消息。但是，我似乎無法以任何方式修改插入的組件屬性（它是一個字符串），這將引入換行符。

例如，使用，或者在組件代碼（包含在圓括號或後面的刻度中）或新的行代碼（）中跨幾行分隔文本。這些都不會在顯示警報消息時在文本中產生換行符。

我不想添加更多的屬性綁定只是爲了迎合這個特定的用例。

在此先感謝。

來源

2016-11-22 Brendan B

https://css-tricks.com/injecting-line-break/ ...這可能會有所幫助 –

似乎任何html序列都會被自動轉義出來，有什麼方法可以讓您關閉該功能嗎？我不熟悉打字稿或角度，所以只是一個建議。 – Turk

添加\ n不工作？「系統警報\ n發生了什麼事情」 – Lockless

-1

的解決方案，爲在le的角度v2.1.1 ast，就是用[innerHTML]="myAlertMessage"。沒有必要使用「bypassSecurityTrustHtml」來換行或列表工作。

來源

2016-11-24 11:52:23

您可以使用管道像

import { Pipe, Sanitizer } from '@angular/core'; 

@Pipe({name: 'safe'}) 
export class SafeHtml { 
    constructor(private sanitizer:Sanitizer){} 

    transform(html) { 
    return this.sanitizer.bypassSecurityTrustHtml(html); 
    } 
}

，並使用它像

<span [innerHTML]="myAlertMessage | safe"></span>

其中myAlertMessage可以包含 或

參見In RC.1 some styles can't be added using binding syntax

來源

2016-11-22 15:51:35

只需使用

<span [innerHTML]="myAlertMessage"></span>

innerHTML會解釋你的HTML代碼。

來源

2017-11-14 16:25:25

使用插值時添加換行符

回答

相關問題