Настройка SafeHTML - Angular 2

Question

У меня есть div который id это "carID".

Мне нужно сделать что-то вроде этого:

magic(){
  //Safe Html is imported previously in the component
  document.getElementById('carID'): SafeHtml
}

В общем, мне нужно изменить тип моего div на SafeHtml

труба

У меня есть труба:

import { Pipe, PipeTransform } from '@angular/core';
import * as jQuery from 'jquery';
import { escape } from 'querystring';
import { TestExecutionComponent } from './test-execution/test-execution.component';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

//import * as angular from '../angular.js';
//CAMBIAR a string
@Pipe({
  name: 'formatXml'
})
export class FormatXmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}

  testExecutionComponent: TestExecutionComponent;

  transform(xml: String): SafeHtml {
    var formatted = '';
    var reg = /(>)(<)(\/*)/g;
    xml = xml.replace(reg, '$1\r\n$2$3');
    var pad = 0;
    jQuery.each(xml.split('\r\n'), function (index, node) {
      var indent = 0;
      if (node.match(/.+<\/\w[^>]*>$/)) {
        indent = 0;
      } else if (node.match(/^<\/\w/)) {
        if (pad != 0) {
          pad -= 1;
        }
      } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
        indent = 1;
      } else {
        indent = 0;
      }

      var padding = '';
      for (var i = 0; i < pad; i++) {
        padding += '  ';
      }

      formatted += padding + node + '\r\n';
      pad += indent;
    });

    var escaped = formatted.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '&gt;').replace(/ /g, '&nbsp;').replace(/\n/g, '<br />');
    // https://stackru.com/questions/39240236/insert-xml-into-dom-in-angular-2
    let safeEscaped = this.sanitized.bypassSecurityTrustHtml(escaped);

    return safeEscaped;
    //let safeEscaped = this.sanitized.bypassSecurityTrustHtml(escaped);

//return safeEscaped;
  }
}

где я использую bypassSecurityTrustHtml со строкой.

Составная часть

  <div id="carDiv" class="table-responsive">
                <table class="table table-bordred table-striped ">
                  <tbody *ngIf="cars">
                    <tr *ngFor="let car of cars; let i = index;">
                      <td *ngIf="i==_rowToShow" [innerHTML]="car.ID| formatXml"></td>
                    </tr>
                  </tbody>
                </table>
              </div>

Мой код работает. Я звоню из файла HTML в мой канал и получаю ответ. Проблема в том, что когда я печатаю его на divстрока остается неизменной (без формата).

Я прочитал, что мне нужно:

• Первый: использовать bypassSecurityTrustHtml на веревочке
• Второе: распечатайте его на SafeHtml

Сообщение, которое я проверяю, выглядит следующим образом: Здесь

Я сделал 1-й шаг, поэтому я думаю, что сейчас мне нужно использовать SafeHtml для Div.Как мне это сделать?

Answer 1

Обновить

Последние 2 строки должны быть

let safeEscaped = this.sanitized.bypassSecurityTrustHtml(escaped);

return safeEscaped;

оригинал

Это может делать то, что вы хотите

class MyComponent {
  constructor(private sanitizer:DomSanitizer){}

    magic(){
      var safe = this.sanitizer.bypassSecurityTrustHtml(document.getElementById('carID').outerHTML);
    }
}

но в зависимости от того, что содержит извлеченный элемент, это может быть мудростью Харакири с готовностью.

Answer 2

Ознакомьтесь с этой библиотекой очистки HTML с открытым исходным кодом для очистки содержимого HTML.

дезинфицировать-html

sanitize-HTML предоставляет простой дезинфицирующий HTML-код с понятным API.

sanitize-HTML терпим. Он хорошо подходит для очистки фрагментов HTML, например, созданных CKEditor и другими редакторами форматированного текста. Это особенно удобно для удаления нежелательного CSS при копировании и вставке из Word.

например:

      <div [innerHTML]="senitizeHtmlContent(htmlContent)"></div>

senitizeHtmlContent(value){

  const html = sanitizeHtml(value);

  return html;

}