Как разрешить html взамен angular2 pipe

У меня есть труба, которая возвращает строку html, однако выходы строки экранируются предположительно как по умолчанию для безопасности. Я уверен, что должен быть вариант разрешить html, но не найти его при поиске документов.

Как я могу передать трубку, чтобы разрешить отображение html?

Ответы

Ответ 1

Используйте привязки для innerHTML или outerHTML для рендеринга уже сбежавшего html. Например <span [innerHTML]="someString | toHtmlPipe"></span>. См. этот фрагмент:

@Pipe({
  name: 'wrapBold'
})
class WrapBold {
  transform(content) {
    return `<b>${content}</b>`;
  }
}

@Component({
  selector: 'my-app',
  pipes: [WrapBold],
  template: `
    <div>
      Hello <span [outerHTML]="content | wrapBold"></span>
    </div>
  `
})
export class App {
  constructor() {
    this.content = 'Angular2'
  }
}

Ответ 2

Я не знаю, возможно ли это с помощью трубы. (Это, см. ответ @alexpods.)

Рассматривали ли вы преобразование своей трубы в компонент со свойством ввода? I.e, независимо от того, что кормит вашу трубу, сделайте это входное свойство компонента. Поместите HTML-код, который создается в шаблон компонента.

Ответ 3

Так спасибо за ответы.

Использование привязки outerHTML, предложенное @alexpods, обработало удовольствие. Мне вообще не нужно было менять мою трубку.

Итак, что я делал раньше:

{{'TEXT' | hn: 'h2.whatever'}}, который привел к правильному html, но экранированному, т.е.

&lt;h2 class="whatever"&gt;TEXT&lt;/h2&gt;

Отлично работает как: <span [outerHTML]="'TEXT' | hn:'h2.whatever'"></span>

который выводит: <h2 class="whatever">TEXT</h2>