Рендеринг HTML внутри двойных фигурных скобок - PullRequest
Новая
       69

Рендеринг HTML внутри двойных фигурных скобок

0 голосов
/ 14 февраля 2019

Я использую канал в приложении Ionic / Angular, который преобразует текст и возвращает результат с HTML-кодом.

Это пример того, как я использую свой канал: 

<ion-label>
  <span>{{ text | mypipe: 'lo':'secondary' }}</span>
</ion-label>

Полученный HTML-код кода в двойных локонах выглядит следующим образом: 

Loth<ion-text color='secondary'>lo</ion-text>rien

Проблема заключается в том, что после выполнения все, что я вижу в своем ярлыке, это Loth<ion-text color='secondary'>lo</ion-text>rien вместо Loth lo рин с цветной частью текста (то есть: 'lo')

Есть идеи, почему у меня такое поведение и как его исправить?

Спасибо

1 Ответ

0 голосов
/ 14 февраля 2019

TLDR :

Если вы хотите визуализировать HTML, содержащий угловые компоненты, вы должны создать / скомпилировать их динамически во время выполнения .

По умолчанию Angular очищает все, что попадает в представление.Для отображения HTML в вашем шаблоне вы должны использовать: 

<span [innerHTML]="text | mypipe: 'lo':'secondary'"></span>

Ваш канал должен вернуть SafeHtml: 

@Pipe({
    name: 'mypipe'
})
export class MyPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    public transform(value, params): SafeHtml {
        //do whatever your pipe does and then
        return this.sanitizer.bypassSecurityTrustHtml(somethingToReturn);
    }
}

См. этот вопрос .

Вы также можете написать общий канал, как в этой статье , а затем просто использовать его: 

<span [innerHTML]="text | mypipe: 'lo':'secondary' | safe: 'html'"></span>

Но поскольку ваша разметка содержит другой угловой компонент, он не будет работать.Это будет работать со стандартной html разметкой.Вы хотите найти способ не только визуализировать некоторый html, но и compile ваш шаблон динамически и динамически создавать результирующий компонент.Что-то вроде этих строк .

...