Angular innerHTML не распознает теги HTML - PullRequest
0 голосов
/ 24 августа 2018

Я изучаю Angular. В моем первом приложении я установил этот текстовый редактор , чтобы дать пользователям больше возможностей для форматирования их текстов, чем с помощью простой текстовой области.

Это хорошо. Если например я напишу

Я Луис?

Мне 37 лет.

Это ссылка , которую вы мне дали

Я получаю этот код, который будет вставлен в базу данных и позже показан в представлении при необходимости:

<p>How are you?<br><br>&nbsp;I am fine, thanks.    <br><br>&gt; This is &nbsp;<a href="https://github.com/froala/angular-froala-wysiwyg">the link</a> you gave me</p>

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

Я пробовал это:

Как и предполагалось здесь

Но это не работает, я получаю ту же строку, включая теги HTML, но без форматирования.

Должен сказать, user.description - это свойство, где хранится этот текст.

Я прочитал кое-что о небезопасном HTML, поэтому, следуя другим советам здесь , я также попытался добавить канал.

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return    this.sanitizer.bypassSecurityTrustHtml(style);
//return   this.sanitizer.bypassSecurityTrustStyle(style);
// return  this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

А потом:

 <div [innerHtml]="product.descripcion | safeHtml"></div>

Но все равно не работает. HTML-теги интерпретируются как обычный текст, поэтому я не могу отображать их так, как хочу.

Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

ОК, кажется, это был только вопрос забывчивости и недостатка хорошего сна.

Я просто вставлял div в раздел, которого больше не существует на мой взгляд.Я сделал в правильном месте сейчас, и это работает как шарм.Позор мне и спасибо за вашу помощь всем вам.

0 голосов
/ 25 августа 2018

Заменить:

<div [innerHtml]="product.descripcion | safeHtml"></div>

на:

 <div [innerHTML]="product.descripcion | safeHtml"></div>
...