Встроенные твиты твиттера не отображаются в InnerHTML после дезинфекции в приложении Angular 8

Строка HTML поступает с сервера и содержит встроенные твиты, которые не отображаются в InnerHTML после очистки. Любые решения приветствуются

Мой .ts-код

export class AppComponent implements OnInit {

  title = 'DemoDynamicMarkupTwitterCode';

  myDynamicMarkup: string = "<p dir=\"ltr\" style=\"text-align: justify;\">\n\n<p style=\"text-align: justify;\">&nbsp;</p>\n\n<p style=\"text-align: justify;\">&nbsp;</p>\n\n<p style=\"text-align: justify;\">&lt;blockquote class=\"twitter-tweet\"&gt;&lt;p lang=\"en\" dir=\"ltr\"&gt;Every good conversation starts with good listening. And Listening becomes interesting when you are in front of this legend. ????????pic.twitter.com/ZxiyR2q9Ko&lt;/a&gt;&lt;/p&gt;&amp;mdash; Yuzvendra Chahal (@yuzi_chahal) &lt;a href=\"https://twitter.com/yuzi_chahal/status/1156792063761479136?ref_src=twsrc%5Etfw\"&gt;August 1, 2019&lt;/a&gt;&lt;/blockquote&gt; &lt;script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"&gt;&lt;/script&gt;</p>\n\n<p style=\"text-align: justify;\">&nbsp;</p>\n\n<p style=\"text-align: justify;\">&nbsp;</p>"

  constructor(public share: ShareService, private renderer2: Renderer2, private el: ElementRef){
  }

  ngOnInit() {
  }
}

--- труба для дезинфекции--- `

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(html): any {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }

`

--- HTML-файл

<div [innerHTML]="myDynamicMarkup | safeHtml"></div>

Я хочу, чтобы твит отображался внутри страницы. Кто-нибудь, сообщите нам о каком-либо рабочем решении или об обходном пути и о том, как этого можно достичь. Что касается строки HTML, полученной с сервера во время вызова веб-службы, твит твита может быть частью внутри как встроенная строка html, созданная с помощью текстового редактора отдельного приложения и сохраненная в базе данных.


person Jebin    schedule 02.08.2019    source источник


Ответы (1)


<div [innerHTML]="myDynamicMarkup | safeHtml"></div>

Вы должны использовать свою пользовательскую трубу.

person Sourav Golui    schedule 02.08.2019
comment
Это была ошибка в моем вопросе. Я исправил это.. Даже после использования пользовательского канала он все еще не отображается - person Jebin; 02.08.2019