我使用Angular 2.0.0-beta.0,我想直接创建和绑定一些简单的HTML.这是可能的,怎么可能?

我试着用

{{myField}}

但myField中的文本将被转义.

对于Angular 1.我找到了ng bind html的点击率,但这似乎在2中不受支持.十、

THX 弗兰克

推荐答案

绑定到innerHTML属性

There is 2 way to achieve:

<div [innerHTML]="myField"></div>
<div innerHTML="{{myField}}"></div>

将传递的HTML标记为受信任,以便Angulars DOM sanitizer不会删除

<div [innerHTML]="myField | safeHtml"></div>

像烟斗一样

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
    // return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

See also In RC.1 some styles can't be added using binding syntax

Angular相关问答推荐

如何取回.angular/ache文件夹?

Angular 17上的material 工具提示的自定义样式

自动完成搜索过滤器不适用于Angular 中动态添加的输入字段

NGNEW不会在src根文件夹ANGLI CLI 17.0.10中生成app.mode.ts

Angular 17:在MouseOver事件上 Select 子组件的正确ElementRef

如何使用解析器处理Angular 路由中存储的查询参数以避免任何额外的导航?

AOS-如何在向上滚动时不再次隐藏元素

使用 Electron 打包器打包 Electron Angular 应用程序时无法加载资源

从组件调用时服务中的 AddTodo 方法不起作用

Rxjs Observable:仅为第一个订阅者获取 HTTP 数据,为其余订阅者获取缓存数据

尽管模型中的变量发生了变化,但Angular 视图没有更新

清除Angular2中的输入文本字段

绑定 Angular material Select 列表

如何修复 [Object: null prototype] { title: 'product' }

*ngIf 和 *ngFor 在 元素上使用

如何在Angular Material2中获取活动选项卡

如何在Angular2中基于特定的构建环境注入不同的服务?

得到了预期表达式的插值 ({{}})

如何从 EventEmitter 函数返回值?

测试一个包含 setTimeout() 的函数