什么可以用来代替角度7中的$ sce？

Question

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

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

以用户可读的形式。什么是Angular 7中的替代品。任何人都可以回答这个以及如何在角度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"