我正在try 创建一个Angular2自定义管道,输出原始html.我希望它只是将输入中的换行符转换为HTML换行符.如何从angular2管道输出原始HTML?

下面是我当前的管道定义,但它避开了我不想要的HTML:

import {Pipe, PipeTransform} from '@angular/core';
/*
 * Converts newlines into html breaks
*/
@Pipe({ name: 'newline' })
export class NewlinePipe implements PipeTransform {
    transform(value: string, args: string[]): any {
        return value.replace(/(?:\r\n|\r|\n)/g, '<br />');
    }
}

编辑:简单说明一下,因为这个问题似乎得到了许多观点和活动,所以我将接受的答案保留不变,尽管对于我的特定示例,用例CSS可能会是更好的 Select ,而且实际上也是我所更改的.但我的实际问题是"如何从Angular 为2的管道输出原始html",而不是公认的答案所显示的"呈现换行符的最佳方式是什么".

不过,请注意,正如下面的 comments 中所提到的,如果您确实在接受的答案中使用了该方法,则需要确保您没有呈现未经判断的用户输入,因为这可能会使您面临XSS漏洞.

推荐答案

答案(我在发布问题后不久发现)是不更改管道定义中的任何内容,而是在使用管道时绑定到[innerHtml].

所以,替换这个:

<div class="panel-body">
    {{mycontent | newline}}
</div>

有了这个:

<div class="panel-body" [innerHtml]="myContent | newline">
</div>

不过,如果在管道定义中有方法可以做到这一点,那就太好了……

编辑:简单说明一下,因为这个答案似乎吸引了很多反对票,所以我将保持原样,即使对于我的特定示例用例来说,CSS可能会是更好的 Select ,而且实际上也是我更改为使用的.

但我真正的问题是"如何从Angular 为2的管道输出原始html",而不是"渲染换行符的最佳方式是什么"这个答案说明了如何做到这一点.

不过,请注意,正如下面的 comments 所述,如果您确实使用了此答案中的方法,则需要确保您没有呈现未经判断的用户输入,因为这可能会使您面临XSS漏洞.

Angular相关问答推荐

FormArray包含嵌套的FormGroups.如何访问嵌套的表单组控件?

使Angular 效果只执行一次

垫-菜单未以17.2.3角显示

存储服务存储在本地存储中,但无法检索到它

茉莉花-模板中调用了如何判断角管

代码优化以删除Angular中的嵌套订阅

类是一个独立的组件,不能在Angular中的`@NgModule.bootstrap`数组中使用

Angular 16-错误NG8002:无法绑定到NGModel,因为它不是输入的已知属性

如何捕获生命周期方法中抛出的Angular组件错误?

Angular 16 Auth Guard在具有0的服务时给出Null Injector错误;httpclient;被注入

Angular 15 在 URL 中使用@进行路由

Angular 2模板驱动表单访问组件中的ngForm

如何在 Angular 2 模板中使用枚举

如何在angular material中使用输入类型文件

material Angular手风琴header/title高度

Angular 4:InvalidPipeArgument:管道AsyncPipe的[object Object]

如何在 Angular 6 中使用 mouseover 和 mouseout

无法绑定到 target,因为它不是div的已知属性

Angular ngClass 和单击事件以切换类

如何对 *ngFor 应用数量限制?