有angular度的HTML绑定
我正在编写一个Angular应用程序，并且我想要显示一个HTML响应。 我怎么做？ 如果我只是使用绑定语法{{myVal}}它将编码所有的HTML字符（当然）。
我需要以某种方式将div的内部html绑定到variables值。
谢谢！
现在正确的语法如下：
<div [innerHTML]="theHtmlString"> </div>
在4.4.6工作
文档参考
[innerHtml]在大多数情况下都是很好的select，但是在真的很大的string或者你需要在html中使用硬编码的样式的时候会失败。
我想分享一下其他的方法：
所有你需要做的是在你的HTML文件中创build一个div，并给它一些id：
<div #dataContainer></div>
然后，在你的Angular 2组件中，创build对这个对象的引用（TypeScript在这里）：
import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ templateUrl: "some html file" }) export class MainPageComponent { @ViewChild('dataContainer') dataContainer: ElementRef; loadData(data) { this.dataContainer.nativeElement.innerHTML = data; } }
然后简单地使用loadData函数将一些文本附加到html元素。
这只是一种方法，你会使用原生JavaScript，但在Angular环境。 我不推荐它，因为使代码更杂乱，但有时没有其他select。
另请参阅Angular 2 – innerHTML样式
Angular 2.0.0和Angular 4.0.0 final
只是为了安全的内容
<div [innerHTML]="myVal"></div>
DOMSanitizer
潜在的不安全HTML需要使用Angulars DOM清理工具显式标记为可信，因此不会去除潜在的不安全内容
<div [innerHTML]="myVal | safeHtml"></div>
像一个pipe道
@Pipe({name: 'safeHtml'}) export class Safe { constructor(private sanitizer:DomSanitizer){} transform(style) { return this.sanitizer.bypassSecurityTrustHtml(style); //return this.sanitizer.bypassSecurityTrustStyle(style); // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs } }
另请参阅在RC.1中，某些样式不能使用绑定语法添加
和文档： https ： //angular.io/api/platform-browser/DomSanitizer
有angular度的标记
要添加包含特定于Angular的标记（属性或值绑定，组件，指令，pipe道…）的HTML，需要在运行时添加dynamic模块和编译组件。 这个答案提供了更多的细节如何使用/创builddynamic模板来编译dynamic组件与Angular 2.0？
在angular2@2.0.0-alpha.44上：
使用{{interpolation}} ，Html-Binding不起作用，请改用“Expression”：
无效
<p [innerHTML]="{{item.anleser}}"></p>
– >抛出一个错误（插值而不是预期的expression式）
正确
<p [innerHTML]="item.anleser"></p>
– >这是正确的方法。
您可以在expression式中添加其他元素，如：
<p [innerHTML]="'<b>'+item.anleser+'</b>'">></p>
暗示
除了使用[innerHTML]添加的HTML（或通过其他方式如element.appenChild()或类似的方式dynamic添加），Angular将不会以任何方式处理，除了安全目的的消毒。
这样的事情只有当HTML被静态添加到组件模板时才起作用。 如果你需要这个，你可以在运行时创build一个组件，就像我如何使用/创builddynamic模板来编译Angular 2.0的dynamic组件一样。
这适用于我： <div innerHTML = "{{ myVal }}"></div> （Angular2，Alpha 33）
根据另一个SO： 从angular色2（Angular2中的一般DOM操作）将服务器中的HTML插入到DOM中 ，“inner-html”相当于Angular 1.X中的“ng-bind-html”
如果包含用户创build的内容，直接使用[innerHTML]而不使用Angular的DOM清理器不是一个选项。 @GünterZöchbauer 在他的回答中提出的safeHtmlpipe道是对内容进行消毒的一种方式。 以下指令是另一个指令：
import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext, SimpleChanges } from '@angular/core'; // Sets the element's innerHTML to a sanitized version of [safeHtml] @Directive({ selector: '[safeHtml]' }) export class HtmlDirective implements OnChanges { @Input() safeHtml: string; constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {} ngOnChanges(changes: SimpleChanges): any { if ('safeHtml' in changes) { this.elementRef.nativeElement.innerHTML = this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml); } } }
要使用的
<div [safeHtml]="myVal"></div>
我很抱歉，如果我错过了这一点，但我想build议一个不同的方法：
我认为最好从服务器端应用程序返回原始数据，并将其绑定到客户端的模板。 这使得更灵活的请求，因为你只是从您的服务器返回json。
对我来说，使用Angular似乎并不合适，如果你正在做的是从服务器获取html并将其“按原样”注入到DOM中。
我知道Angular 1.x有一个HTML绑定，但我还没有看到在Angular 2.0中的对手。 他们可能会在稍后添加它。 无论如何，我仍然会考虑您的Angular 2.0应用程序的数据API。
我有一些简单的数据绑定样本，如果你有兴趣： http : //www.syntaxsuccess.com/viewarticle/angular-2.0-examples
只是为了得到一个完整的答案，如果你的html内容是在一个组件variables，你也可以使用：
<div [innerHTML]=componementVariableThatHasTheHtml></div>
在AngularJS v2.1.1中工作
<div [innerHTML]="variable or htmlString"> </div>
在Angular 2中，你可以做3种types的绑定：
-
[property]="expression"– >任何html属性都可以链接到一个
expression。 在这种情况下，如果expression式更改属性将会更新，但是这不会以其他方式工作。 -
(event)="expression"– >当事件激活执行expression式时。 -
[(ngModel)]="property"– >将属性从js（或ts）绑定到html。 这个属性的任何更新都会显而易见。
expression式可以是一个值，一个属性或一个方法。 例如：'4'，'controller.var'，'getValue（）'
这里的例子
如Angular 2 doc所述，dynamic添加元素到DOM的方法是使用@ Angular / core的ViewContainerRef类。
你所要做的就是声明一个将实现ViewContainerRef的指令，并且像DOM占位符一样工作。
指示
import { Directive, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[appInject]' }) export class InjectDirective { constructor(public viewContainerRef: ViewContainerRef) { } }
然后，在要注入组件的模板中：
HTML
<div class="where_you_want_to_inject"> <ng-template appInject></ng-template> </div>
然后，从注入的组件代码中，您将注入包含所需HTML的组件：
import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core'; import { InjectDirective } from '../inject.directive'; import { InjectedComponent } from '../injected/injected.component'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { @ViewChild(InjectDirective) injectComp: InjectDirective; constructor(private _componentFactoryResolver: ComponentFactoryResolver) { } ngOnInit() { } public addComp() { const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent); const viewContainerRef = this.injectComp.viewContainerRef; const componentRef = viewContainerRef.createComponent(componentFactory); } public removeComp() { const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent); const viewContainerRef = this.injectComp.viewContainerRef; const componentRef = viewContainerRef.remove(); } }
我在Angular 2上添加了一个完整的演示应用程序， dynamic地将组件添加到DOM演示
下面的代码将帮助你
myval你可以用所需的htmlreplace
<div [innerHTML]="myVal"></div>
如果您的angular度（或任何框架）应用程序中有模板，并且您通过HTTP请求/响应从后端返回HTML模板，那么您将在前端和后端之间混合使用模板。
为什么不把模板的东西放在前端（我会build议）或者在后端（相当不透明的imo）呢？
如果你在前端保存模板，为什么不直接用JSON响应后端的请求。 你甚至不需要实现一个RESTful结构，但是保持模板在一边使你的代码更加透明。
当别人需要处理你的代码时（甚至你自己在一段时间后重新input你自己的代码），这将会得到回报！
如果你做得对，你会有小模块的小组件，最重要的是，如果你的代码是imba，那么不懂编程语言的人将能够理解你的模板和你的逻辑！ 另外，保持你的function/方法尽可能小。 您最终会发现，与大型函数/方法/类相比，维护，重构，审阅和添加function要容易得多，并将前端和后端之间的模板和逻辑混合在一起，并在后端保留大量的逻辑如果你的前端需要更灵活（比如写一个android前端或切换到不同的前端框架）。
哲学，人:)
ps：你不必实现100％干净的代码，因为它是非常昂贵的 – 特别是如果你必须激励团队成员）;但是：你应该find一个清洁的代码和你有什么（也许它已经很干净了）
如果可以，请检查本书，并让它进入你的灵魂： https ： //de.wikipedia.org/wiki/Clean_Code
只需在HTML中使用[innerHTML]属性，如下所示：
<div [innerHTML]="myVal"></div>
您的组件中是否有属性，其中包含一些需要在模板中显示的HTML标记或实体？ 传统的插值不起作用，但是innerHTML属性绑定来救援。
使用{{myVal}} 不能按预期工作！ 这不会拿起像<p> ， <strong>等的HTML标签，只能作为string传递…
想象一下，你的组件中有这样的代码：
const myVal:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>'
如果你使用{{myVal}} ，你会在视图中得到这个：
<strong>Stackoverflow</strong> is <em>helpful!</em>
但使用[innerHTML]="myVal"使得结果如预期的那样：
Stackoverflow是有帮助的！
试试这个代码
你的string像下面的HTML标记
htmlString:string = "Hello<br/>Html"
你可以在html页面中获取string
<ion-content> <ion-item> <div [innerHTML] = "'<p>' + htmlString + '</p>'"></div> </ion-item> </ion-content>
