Что можно использовать вместо $ sce в angular 7? - PullRequest
Новая
       26

Что можно использовать вместо $ sce в angular 7?

0 голосов
/ 18 апреля 2019

Мы использовали $ sce в угловых единицах, чтобы показать HTML-теги, подобные этой 

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

в удобочитаемой форме. Чем заменить то же самое в Angular 7. Кто-нибудь может ответить на это и как использовать то же самое в угловых 7. После поиска в Интернете я обнаружил, что DomSanitizer не может точно определить, как его использовать.

Ответы [ 2 ]

1 голос
/ 18 апреля 2019

Вы можете создать трубу для проверки дезинфицирующего средства. 

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); 
  }
}
0 голосов
/ 19 апреля 2019

После долгих попыток с разными подходами, наконец, я добился успеха, создав общий модуль (без общего модуля я был каждый раз получаю несколько ошибок)

1) Я создал собственный канал sanitizeHtml в src / app / pipe / 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) Затем создал общий модуль 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"
...