Используя Angular 5 и Firebase, я создал обзорный веб-сайт, который позволяет пользователям создавать обзоры на CreateComponent и читать их на ReviewComponent. Я бы хотел, чтобы тело обзора могло содержать HTML для ссылок или изображений.

ReviewComponent вытягивает текст обзора с:

<p style="margin-bottom: 2rem; white-space: pre-wrap;">{{review.body}}</p>

Я использую pre-wrap для сохранения переносов строк в теле.

Пример ввода из CreateComponent:

I already can’t wait to see <a href="http://www.ign.com/articles/2017/11/30/marvels-the-avengers-infinity-war-trailer-breakdown"> what comes next.</a>

Когда я проверяю вывод тела, я вижу следующее:

<p _ngcontent-c1 style="margin-bottom: 2rem; white-space: pre-wrap;">I already can’t wait to see &lt;a href="http://www.ign.com/articles/2017/11/30/marvels-the-avengers-infinity-war-trailer-breakdown"&gt;what comes next.&lt;/a&gt;</p>.

Как изменить HTML, чтобы строка корректно работала со ссылками и изображениями?

0
cfoster5 14 Мар 2018 в 00:15

2 ответа

Лучший ответ

Привязка review.body к [innerHTML] исправила это.

<p style="margin-bottom: 2rem; white-space: pre-wrap;">{{review.body}}</p>

Сейчас

<p style="margin-bottom: 2rem; white-space: pre-wrap;" [innerHTML]="review.body"></p>
0
cfoster5 4 Апр 2018 в 14:35

Привет, ребята, я не знаю, почему вы проголосовали против моего ответа, но вот решения вашей проблемы:

https://plnkr.co/edit/VHvVpvnTeoGWsA0d3eex?p=preview

Вот код:

//our root app component
import {Component, NgModule, VERSION, Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <div [outerHTML]='selectedValue | html'></div>
  `,
})
export class App {
  selectedValue: string = 'I already can’t wait to see <a href="https://www.ign.com/articles/2017/11/30/marvels-the-avengers-infinity-war-trailer-breakdown"> what comes next.</a>';
  constructor(private cd: ChangeDetectorRef) {
  }
}


@Pipe({
  name: 'html'
})
export class HtmlPipe implements PipeTransform {

  transform(value: string) {
      return `<div>${value}</div>`;
  }

}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, HtmlPipe ],
  bootstrap: [ App ]
})
export class AppModule {}

Вы можете написать pipe для этого приложения, как в этой статье:

Как разрешить html вместо трубы angular2

0
Nikolay Zatonatskiy 13 Мар 2018 в 23:09