在 angular 7 中可以用什么代替 $sce？

Question

我们在 angular 1 中使用 $sce 来显示 html 这样的标签

> <p><strong>xyzz</strong> yttryrtyt <span
> style="color:#e74c3c">abc</span>.</p>

以用户可读的形式。 Angular 中 same 的替代品是什么 7. 任何人都可以回答这个问题以及如何在 angular 7 中使用它吗？在网上搜索后，我发现 DomSanitizer .. 无法准确使用它。

Answer 1

您可以创建一个管道来检查 dom 消毒剂。

public myVal = "<p><strong>xyzz</strong> yttryrtyt <span> style="color:#e74c3c">abc</span>.</p>";

<div [innerHTML]="myVal | safeHtml"></div>

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

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

Answer 2

在用不同的方法尝试了很长时间之后，我终于通过创建共享模块获得了成功（没有共享模块我是每次都会出现多个错误）

1) 我在 src/app/pipes/custom/sanitizeHtml.ts

下创建了自定义管道 sanitizeHtml

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

@Pipe({
    name: 'sanitize',
})
export class SanitizeHtml implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}

    transform(v: string): SafeHtml {
        return this.sanitizer.bypassSecurityTrustHtml(v);
    }
}

2) 然后创建共享模块src/app/app.sharemodule.ts

import { CommonModule } from '@angular/common';
import { SanitizeHtml } from './pipes/custom/sanitizeHtml';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [CommonModule],
    declarations: [SanitizeHtml],
    exports: [SanitizeHtml],
})
export class SharedModule {}

3) 然后导入到我的懒加载模块中

import { SharedModule } from '../../app.sharemodule';
 imports: [
        CommonModule,
        SharedModule,
    ],

4) 在 html 文件中用作

[innerHTML]="rowData[col.field] | sanitize"

在 angular 7 中可以用什么代替 $sce？

What can be used instead of $sce in angular 7?

rendering

angular

angular-dom-sanitizer

angular7