如何从 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 类的样式？我想让 xxx 变成红色。我对解决方法不感兴趣，必须在管道中添加类，如上所述。

答案在某种程度上与 Angular 2 - innerHTML styling，但是我自己找不到解决办法。

---

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

.mark{
    color: red;
}

我明白了：

“警告：清理 HTML 会删除一些内容（请参阅 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'（Witch 很容易成为一个变量..）并在转换函数中使用它。

.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

将组件的视图封装模式设置为“无”，以便硬编码类在组件中工作

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); 
    }
}