angular - 在 Angular 7 中可以使用什么来代替 $sce？

Question

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

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

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

Answer 1

你可以创建一个管道来检查 dom sanitizer。

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

After trying for long with different approaches Finally I got success by creating shared module(without shared module i was getting multiple errors every time)

1) I have created custom pipe sanitizeHtml under src/app/pipes/custom/sanitizeHtml.ts

    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) Then created a shared module 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) Then imported it in my lazy loaded module

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

4)In html file used it as

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