如何允许html返回angular2管道？

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建议的outerHTML绑定是一种享受.根本不需要改变我的管道.

所以我之前做的是:

{{'TEXT' | hn: 'h2.whatever'}} 这导致正确的HTML但逃脱了ie.

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

效果很好: <span [outerHTML]="'TEXT' | hn:'h2.whatever'"></span>

哪个输出: <h2 class="whatever">TEXT</h2>

Answer 3

我不知道管道是否可行.(是的,请参阅@ alexpods的回答.)

您是否考虑过将管道转换为具有输入属性的组件？即,无论是给你的管子喂食什么,都要把它作为组件的输入属性.将管道生成的HTML放入组件的模板中.