当前位置:  开发笔记 > 编程语言 > 正文

如何允许html返回angular2管道?

如何解决《如何允许html返回angular2管道?》经验,为你挑选了3个好方法。

我有一个管道返回一个html字符串,但字符串输出转发可能是安全的默认值.我确定必须有一个选项允许html而不能在我搜索文档时找到它.

如何告诉管道允许实际的html渲染?



1> alexpods..:

使用绑定innerHTMLouterHTML渲染已经转义的HTML.例如.看到这个插件:

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

@Component({
  selector: 'my-app',
  pipes: [WrapBold],
  template: `
    
Hello
` }) export class App { constructor() { this.content = 'Angular2' } }


这完全回答了你的要求.您应该更新答案,以更准确地了解您要查找的内容或接受它.
@MarkRajcok实际上它只是es2015 [模板字符串表达式插值](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings#Expression_interpolation)([这里](http://www.ecma- international.org/ecma-262/6.0/#sec-template-literal-lexical-components)是规范).几乎所有主流浏览器都支持它(例如尝试在Chrome控制台中使用`\`Date $ {Date.now()} \``.

2> rgb..:

所以感谢回复.

使用@alexpods建议的outerHTML绑定是一种享受.根本不需要改变我的管道.

所以我之前做的是:

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

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

效果很好:

哪个输出:

TEXT


很快就会说...它只是第一次工作,如果你正在更新视图,例如更新细节的菜单,下一次它将失败并出现以下错误"无法设置'outerHTML'属性'元素':此元素没有父节点"可能是因为之前的转换.

3> Mark Rajcok..:

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

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

推荐阅读
oDavid_仔o_880
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有