Question

我有一些警告消息框的HTML。使用插值，我可以重复使用相同的html来显示多个不同的警报消息。它看起来像这样：{{ myAlertMessage }}

现在我想显示一条包含换行符的更长警报消息。但是，我似乎无法以任何方式修改插值组件属性（这是一个字符串），这将引入换行符。

例如，使用，或在组件代码中的几行（包含在括号或后面的刻度中）或新行代码（）之间间隔文本。当显示警告消息时，这些都不能在文本中产生换行符。

我宁愿不必为了满足这个特定的用例而添加更多的属性绑定。

提前致谢。

Answer 1

您可以使用

之类的管道

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

Answer 2

只需使用

export function layoutReducer(state: LayoutState = INITIAL_LAYOUT_STATE, action: Action) : LayoutState{
  switch (action.type){
    case UPDATE_SPLIT_CONFIG_DIMENSION :
      return updateSplitConfigDimension(state, action);
    case DISABLE_SPLIT_CONFIGURATION:
      return state;
    case UPDATE_SPLIT_AREA_VISIBILITY :
      return state;
    case RESTORE_DEFAULT_CONFIG_LAYOUT :
      return state;
    default:
      return state;// with this Angular can perform the ngrx init action
  }
}

innerHTML属性将解释您的html代码。

Answer 3

至少对于Angular v2.1.1，解决方案是使用[innerHTML]="myAlertMessage"。没有必要使用“bypassSecurityTrustHtml”来换行或列表。

Answer 4

尝试在\n文本中使用myAlertMessage。诸如此类："\n Some alert text \n Newline of the alert text";

在组件HTML文件中使用<pre> html标签，如下所示：

<div>
  <p><pre>{{ myAlertMessage }}</pre></p>
</div>

使用插值时添加换行符

4 个答案: