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

Question

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

Как я могу сказать каналу, чтобы позволить фактическому html отображаться?

Answer 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'
  }
}

Answer 2

Я не знаю, возможно ли это с трубкой. (Это, см. Ответ @ alexpods.)

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

Answer 3

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

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

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

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

<h2 class="whatever">TEXT</h2>

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

какие выводы: <h2 class="whatever">TEXT</h2>

Answer 4

Итак, вы хотите взять текст и отобразить его как HTML. Если строка является фактическим HTML, то почему не компонент? Это не функциональность канала для рендеринга HTML. Однако, если вы хотите, например, визуализировать текст с символами новой строки, например значение JSON с отступом, используйте предварительно HTML-элемент:

{{obj | myPipe}}

Я буду приветствовать ответ innerHtml, однако, как фактический ответ на вопрос.