如何从 innerHTML 应用 CSS .class

Question

我有烟斗：

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

@Pipe({
   name: 'spaning',
   pure: false
})
export class SpanPipe implements PipeTransform 
{
transform(value: string): string
    {
        return "<span class='mark'>xxx</div>"+value;
    }
}

并像这样使用它：

 <div [innerHTML]="movie.title| spaning"></div>

如何在 css 中设置 .mark class 的样式？我希望 xxx 变成红色。我对解决方法不感兴趣，必须在管道中添加 class，如上所述。

答案与，但我自己找不到解决方案。

如果我只是在我使用此管道的组件中添加样式：

.mark{
    color: red;
}

我得到：

"WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss)."

Answer 1

编辑:

抱歉.. 当您插入新的 html 标签时，您必须使用 DOMSanitizer.

我附上 plunker 来展示如何正确使用它

https://plnkr.co/edit/vBnF9hPSpw46053FQ08G?p=preview

您可以使用 ngStyle.

Pipes transform函数获取两个参数：'value'和'args'：

export interface PipeTransform {
    transform(value: any, ...args: any[]): any;
}

所以你可以传递你的管道参数。在这种情况下，我传递字符串 'red'（很容易成为一个变量..）并在转换函数中使用它。

.html:

<div [innerHTML]="movie.title| spaning :'red'"></div>

.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
   name: 'spaning',
   pure: false
})
export class SpanPipe implements PipeTransform 
{
transform(value: string,color:any): string
    {
        return this.sanitizer.bypassSecurityTrustHtml("<span class='mark' style=color:"+color+">xxx "+value+"</div>");
    }
}

Answer 2

[innerHTML] 不能在没有 DOMSanitizer provider 的情况下使用，否则会引发安全错误。您可以在自定义管道中使用 DOMSanitizer provider 来清理 HTML，如下所示，

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'

@Pipe({
   name: 'spaning',
   pure: false
})
export class SpanPipe implements PipeTransform 
{
    constructor(private sanitized: DomSanitizer) {}

    transform(value: string,color:any): SafeHtml{
       return this.sanitized.bypassSecurityTrustHtml("<span class='mark' [ngStyle]="{'color':color}">xxx</div>"+value);
    }
}

HTML

<div [innerHTML]="movie.title| spaning :'red'"></div>

Answer 3

https://plnkr.co/edit/p0hsn57WT9FfO6E6lRjL?p=info <- plunkr

将组件的视图封装模式改为 'None' 以便硬编码 class 在组件中工作

import { ViewEncapsulation } from '@angular/core'

在装饰器中

selector: 'your-component',
encapsulation: ViewEncapsulation.None,

然后在返回之前对管道中的 HTML 进行消毒

export class SpanPipe implements PipeTransform 
{
    constructor(private sanitized: DomSanitizer) {}

    transform(value: string): any {
       return this.sanitized.bypassSecurityTrustHtml("<span class='mark'>xxx</div>"+value); 
    }
}

如何从 innerHTML 应用 CSS .class

How to applay CSS .class from innerHTML

css

innerhtml

angular