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"

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

2 个答案: