Вставить HTML в строку
Используя 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 <a href = "http://www.ign.com/articles/2017/11/30/marvels-the-avengers-infinity-war-trailer-breakdown">what comes next.</a></p>.
Как я могу изменить HTML, чтобы строка корректно работала со ссылками и изображениями?
Ответы 2
Привет, ребята, я не знаю, почему вы проголосовали против моего ответа, но вот решения вашей проблемы:
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 для этого приложения, как в этой статье:
Связывание 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>
Я думаю, вам нужно использовать редактор форматированного текста.