Angular html шаблон в виде строки с атрибутом стиля отображается без атрибута стиля

Question

У меня есть Util.ts, который определяет функцию форматирования, как показано ниже. Проблема в маленьком теге, который имеет свойство стиля.

export const formatMessage = (message ) =>{
    return '<b>' + message.name+" </b><small style ='color:black;'>" +message.ts + '</small>  ' + message.c;
  }

Однако, когда визуализированный атрибут тега малого тега удаляется.

Я не уверен, почему такое поведение. Шаблон строки HTML, возвращаемый функцией formatMessage, присоединяется к HTML с использованием внутреннего HTML DIV, как показано здесь.

<ul style="list-style-type: none;">
  <li  *ngFor="let each of messages"><div class='messageStyle' [innerHTML]="each"> </div></li>
</ul>

Почему удаляется ли это свойство стиля (пока сохраняется свойство класса) и как мне решить проблему?

Answer 1

Дезинфицирующее средство

DOM от этого стиля html. это сделано для предотвращения xss-атак. Вы можете обойти проверки безопасности, выполнив это:

  constructor(private s: DomSanitizer) { }
...
  export const formatMessage = (message, sanitizer ) =>{
    return sanitizer.bypassSecurityTrustHtml('<b>' + message.name+" </b><small style ='color:black;'>" +message.ts + '</small>  ' + message.c);
  }

и передайте sanitizer в formatMessage