Как перевести HTML-строку в реальный элемент HTML с помощью ng-for в Angular 2

Как я знаю, в angular 1.x я могу использовать службу $sce для удовлетворения моего требования вроде этого

myApp.filter('trustAsHTML', ['$sce', function($sce){
  return function(text) {
    return $sce.trustAsHtml(text);
  };
}]);

и в html файле используйте это

{{ htmlString || trustAsHTML }}

Есть ли такая услуга, как $sce или какой-либо канал или какой-либо метод может быть компетентным, чтобы сделать это в версии angularjs 2?

Ответы

Ответ 1

В angular2 нет ng-include, trustAsHtml, ng-bind-html и ничего подобного, поэтому наилучшим вариантом является привязка к innerHtml. Очевидно, что это позволяет вам открывать все виды атак, поэтому вам решать разобрать/избежать содержимого, и для этого вы можете использовать каналы.

@Pipe({name: 'escapeHtml', pure: false})
class EscapeHtmlPipe implements PipeTransform {
   transform(value: any, args: any[] = []) {
       // Escape 'value' and return it
   }
}

@Component({
    selector: 'hello',
    template: `<div [innerHTML]="myHtmlString | escapeHtml"></div>`,
    pipes : [EscapeHtmlPipe]
})
export class Hello {
  constructor() {
    this.myHtmlString = "<b>This is some bold text</b>";
  }
}

Здесь plnkr с наивным html-экранированием/разбором.

Надеюсь, это поможет:)

Ответ 2

Простейшее решение:

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

Где some_string может быть html-кодом, например: some_string = "<b>test</b>".

Нет труб или чего-то еще. Поддерживается Angular 2.0

Ответ 3

Я получил ту же самую проблему купить Я запрашиваю декодирование HTML из Backend и их вы можете ввести html на свою страницу

// YOUR TS
@Component({
  selector: 'page',
  templateUrl: 'page.html'
})
export class Page {
  inject:any;
  constructor( ) { }

  ionViewDidLoad() {
    this.inject='your HTML code'

  }

}

// YOU HTML PAGE

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

Ответ 4

Для привязки свойств ниже: <div innerHtml="{{ property }}"></div>

Только для строки: <div [innerHtml]="<p>property</p>"></div>