如何允许 html 返回 angular2 管道?

2024-04-10

我有一个返回 html 字符串的管道,但是字符串输出可能会作为安全默认值进行转义。我确信必须有一个选项来允许使用 html,但当我搜索文档时找不到它。

我怎样才能告诉管道允许渲染实际的 html?


使用绑定innerHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML or outerHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML渲染已经转义的 html。例如<span [innerHTML]="someString | toHtmlPipe"></span>. See 这个笨蛋 http://plnkr.co/edit/458YlcYlHwDIRnQ6a2B9?p=preview:

@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'
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何允许 html 返回 angular2 管道? 的相关文章

  • 装饰器不支持函数调用

    我在 ng build prod 时遇到问题 装饰器不支持函数调用 但在 initialState 中调用了 Ui export const initialState AppState userAisles null userItems n
  • Angular 2 - 将延迟作为输入参数传递给组件动画

    我想从 html 传递组件动画的延迟 例如 html
  • Angular2 渲染器 setElementStyle 不起作用

    这是我的组件元数据 Component moduleId module id selector si attribute directive template div Highlight Me div br div Highlight Me
  • node_modules 显示为空,您可能需要运行 `npm install`

    我从 git 克隆了一个 Angular 4 项目 当我转到项目的根文件夹并执行时ng serve 我收到以下错误 node modules appears empty you may need to run npm install 我该如
  • Angular2 RxJS从地图函数调用类函数

    我是 Angular 2 和 Observables 的新手 所以如果我的问题微不足道 我深表歉意 无论如何 我正在尝试使用 RxJS 测试 Angular 2 HTTP 客户端 虽然我让它工作了 但我需要向我当前正在处理的服务添加更多逻辑
  • 从安全角度来看,在 Windows 中使用管道是否被认为是危险的?

    从安全角度来看 在 Windows 中使用管道是否被认为是危险的 管道在 Windows 中并不是一个特殊的安全风险 如果您担心安全性 请确保将管道上的安全描述符设置为适当的 DACL 如果您的使用要求管道开放供任何人连接 那么您必须将传入
  • 在运行量角器测试时进行 API 调用

    我已经使用构建了一个网络应用程序angular2 0 and typescript 现在我正在写E2E为我的网站使用protractor 现在 在我的一项测试中 我需要进行 API 调用 HTTP GET 请求 并使用响应值作为测试用例中的
  • Angular flex-layout - fxLayoutGap 导致包裹行末尾出现恼人的间隙

    使用fxLayoutGap 和wrap 在被换行的每一行的末尾留下令人讨厌的边距 有没有办法来解决这个问题 https stackblitz com edit angular fxlayoutgap calc mralnz file app
  • 不支持函数调用。考虑用对导出函数的引用替换函数或 lambda

    我在我的应用程序中使用 APP INITIALIZER 并在 app module ts 中将其设置如下 并进行必要的导入 NgModule providers ContextService provide APP INITIALIZER
  • Angular 2 变更检测是如何工作的?

    在 Angular 1 中 更改检测是通过对 scope 层次结构进行脏检查来进行的 我们会在模板 控制器或组件中隐式或显式创建观察者 在 Angular 2 中 我们不再有 scope 但我们确实重写了 setInterval setTi
  • Angular 2 测试 ng-content

    我想知道是否有办法测试ng content不创建宿主元素 例如 如果我有警报组件 Component selector app alert template div div
  • 如何在 Angular 模板中嵌入 GitHub gist?

    角度忽略script其模板中包含标签 但加载 GitHub gist 需要它们 执行此操作的最佳做 法是什么 使用iframe 创造script动态标记 或者是其他东西 一种方法是创建一个iframe with script里面并在你希望你
  • Angular 2交错列表动画

    我正在尝试使用动态列表在我的应用程序中交错播放动画 如果可能的话 我希望动画进入和离开 但我会解决只是为了让进入工作 animations trigger slideIn transition enter style transform t
  • Angular2排序数组用于在html中的*ngFor中显示

    我正在循环浏览所有帖子 li 当显示每个帖子的日期时 我会执行以下操作 post date date yyyy MM dd HH mm ss 我想要做的是按最新的第一个顺序显示所有帖子 我尝试过使用类似的管道 li li import Pi
  • 在电子打印中构建的角度应用程序显示空白窗口

    我开发了一个角度应用程序 然后在电子中构建该应用程序 该应用程序工作正常 但是当我单击按钮打印特定 div 时 它会打开一个电子的空白窗口 我用ngx print图书馆 它在角度服务方面效果很好 但在电子构建方面遇到了问题
  • Angular 4在下一行显示p标签的换行符

    我有一个 Angular 4 页面 我必须在其中显示用户评论列表 用户可以多行输入评论 我想在多行中绑定文本 我想显示以 n在新行中 我努力了 p p p comment text p 我不想更换 n with br 标签 我想要别的东西
  • Angular2 authguards 执行异步函数失败

    我想通过检查用户是否从服务器登录来保护我的路由 但异步函数不会被执行 这是我的代码 canActivate route ActivatedRouteSnapshot state RouterStateSnapshot Observable
  • 使用 Angular 4 将新行添加到 mat-table 中

    如何从输入字段手动将新行添加到 Angular Material 表中 请看这张图片 如果我添加状态名称和状态代码 它应该出现在下表中 请帮助我如何使用 Angular 4 来实现它 我整理了一个简单的示例 应该可以很好地提示您从哪里开始
  • 通过管道连接到 findstr 的输入

    我有一个文本文件 其中包含宏名称列表 每行一个 我的最终目标是打印宏名称在当前目录的文件中出现的次数 宏的名称位于C temp macros txt type C temp macros txt在命令提示符下可以正常打印列表 现在我想将该输
  • Webpack 在 Angular 的 ng 服务中的作用

    我是 Angular 的新手 想知道当我们为应用程序提供服务时 Webpack 在幕后扮演什么角色 在最初的印象中 我开始知道 webpack 是一个构建和打包工具 它将所有必需的 JS 文件分组到单独的包中 然而 我无法找到 webpac

随机推荐

  • 如何从 zip 中打开 html 文件?

    有什么方法可以从包含 html 引用的图像的 zip 文件中打开 html 文件吗 我生成带有资源相对路径的 html 但浏览器不会在 zip 文件中找到它们 我必须先将其提取 从拉链打开它是理想的选择 有什么办法可以做到吗 据我所知 只有
  • 创建 Angular/React 应用程序时的 .Net 本地主机服务器

    我正在使用 VS2017 2019 和 NET Core 2 1 来创建Angular or React应用程序 Angular CLI or create react app用于设置一切 以下所有内容都与开发阶段有关 当我们构建 NET
  • 针对数字板难题的优化 CLP(FD) 求解器

    考虑问题从https puzzling stackexchange com questions 20238 explore the square with 100 hops https puzzling stackexchange com
  • let* 和 set 之间的区别?在 Common Lisp 中

    我正在从事一个基因编程爱好项目 我有一个函数 宏设置 当以 setq setf 形式评估时 将生成一个如下所示的列表 setq trees make trees 2 gt x abs x 然后它将绑定到 lambda 函数
  • 如何使用 Swift 在 stderr 上打印?

    我在 Linux 上使用 Swift 2 2 需要在标准错误流上编写一些调试输出 目前 我正在执行以下操作 import Foundation public struct StderrOutputStream OutputStreamTyp
  • 在没有窗口的windows桌面上绘制OpenGL

    我见过这样的事情 我想知道这是否可能 假设我运行我的应用程序 它会显示其下方的渲染结果 所以基本上 在没有窗口的情况下在屏幕上渲染 可能还是谎言 注意 想要在 Windows 和 C 中执行此操作 可以使用您的应用程序在其他应用程序的窗口上
  • Perl 函数中的引用返回值是否更好?

    与返回数组或哈希的引用相比 返回数组或哈希有哪些优缺点 对内存或执行时间有影响吗 两者在功能上有何区别 sub i return an array my a push things in a return a sub i return a
  • cudaMemcpyToSymbol 与 cudaMemcpy [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我试图找出
  • 我应该如何格式化 R mlogit 包的数据?

    我正在使用mlogit与 R 一起打包 使用以下方式导入我的数据后 t lt read csv junk csv header TRUE sep dec 并致电 x lt mlogit data t choice D shape long
  • 将接口方法作为参数传递

    Note 这很可能是非常C 特定语言问题 与以下无关WCF or web services at all 有3方ASMXWeb 服务 用于数据检索 我创建了一个名为的通用方法ExecuteCommand 用于针对 Web 服务的每个请求 该
  • FSharp.Data.JsonProvider - 从类型获取 json

    FSharp Data JsonProvider 提供了一种从 json 转换为 F 类型的方法 是否可以反向操作 即声明 FSharp Data JsonProvider 创建的类型之一的实例 将字段值设置为我需要的值 然后获取等效的 j
  • Pyenv 不自动激活

    我已经在我的环境中安装了 pyenv 直到这个周末 当我安装 Kivy 时 我的 pyenv 本地设置一直工作正常 但是现在 当我进入各个 python 项目目录时 pyenv 不会自动正确激活正确的 python 版本 E g 我像这样使
  • Spring Security 与 AcceptHeaderLocaleResolver 和 i18n

    我陷入困境 可能错过了文档中的某些内容或犯了一些小错误 Spring Security 3 0 5 已集成到我的 Spring MVC 3 0 5 应用程序中 AcceptHeaderLocaleResolver用于区域设置检测 除了安全错
  • Angular JS 2 npm 和 ng(Angular-Cli) 之间的区别(内置工具)

    在 AngularJS 2 中 NPM 和 NG Angular CLI 之间的主要区别是什么 如果通过 NPM 如果我们可以构建我们的应用程序并且它可以工作 那么 NG 构建 Angular cli 的需求是什么 npm start 与
  • SQLite3 .backup 和 .dump 命令是否锁定数据库?

    我能找到的唯一文档 backup and dump是由 help backup DB FILE Backup DB default main to FILE dump TABLE Dump the database in an SQL te
  • 使用泛型快速查找给定类的超级视图

    我想我正在与仿制药作斗争 我想创建简单的 UIView 扩展来递归地查找函数参数中传递的类的超级视图 我希望该函数返回可选的 显然包含 nil 或作为提供的类的实例可见的对象 extension UIView func superviewO
  • 强制 Internet Explorer 使用特定的 Java 运行时环境安装?

    当查看别人包含小程序的网页时 当我安装了多个 JRE 时 如何强制 Internet Explorer 6 0 使用特定的 JRE 首先 禁用当前安装的 Java 版本 要执行此操作 请转至控制面板 gt Java gt 高级 gt 浏览器
  • 没有要加载的文件——rest_client (Rails 3)

    当我做thin start 这是我得到的错误 thin start gt gt Using rack adapter rvm gems ruby 1 9 2 p0 gems activesupport 3 0 9 lib active su
  • 尾递归函数上的 StackOverflowError

    当我使用 avg bids 4000 10 5 调用以下 Clojure 代码时 会导致 java lang StackOverflowError 我试图找出原因 因为 sum bids 是作为尾递归函数编写的 所以应该可以工作 使用 Cl
  • 如何允许 html 返回 angular2 管道?

    我有一个返回 html 字符串的管道 但是字符串输出可能会作为安全默认值进行转义 我确信必须有一个选项来允许使用 html 但当我搜索文档时找不到它 我怎样才能告诉管道允许渲染实际的 html 使用绑定innerHTML https dev