Ionic - альтернатива InnerHTML

Question

У меня есть переменная, которая выбирает строку из моей базы данных и отображает ее на одной из моих панелей. Получаемый текст содержит типичные теги HTML, такие как <b><u><p> и т. Д.

<div [innerHTML]="myVariableWithTags"></div>

Это будет работать при тестировании с ionic lab, но не будет работать на эмуляторах или реальных устройствах.

Итак, мой вопрос: что является альтернативой innerHTML для Ionic?

Например, моя переменная myVariableWithTags выглядит следующим образом:

<b>This has to be bold</b> <i>and this italic</i>

Я хочу сделать следующее:

<div> {{myVariableWithTags}} </div>

и хотел бы, чтобы панель выглядела следующим образом: Это должно быть жирным шрифтом и курсивом

вместо <b>This has to be bold</b> <i>and this italic</i>

Возможно ли это?

Answer 1

Обертка myVariableWithTags в <span>. Это сработало для меня.

Answer 2

шаг 1: создать трубу

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

Шаг 2: Объявите и экспортируйте его в app.module.ts

import { SafePipe } from '........';
@NgModule({
    declarations: [
    SafePipe
    ],
    imports: [

    ],
    exports: [
        SafePipe
    ],
    providers: [
    ]
})

шаг 3 : используйте safe pipe в html-файле

<div [innerHTML]="myVariableWithTags | safe"></div>