我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
您可以使用几种方法来实现该解决方案。正如已经批准的答案中所说,你可以使用:
<div [innerHTML]="myVal"></div>
根据你想要实现的目标,你也可以尝试其他东西,比如javascript DOM(不推荐,DOM操作很慢):
演讲
<div id="test"></test>
组件
var p = document.getElementsById("test");
p.outerHTML = myVal;
属性绑定
Javascript DOM外部HTML
其他回答
如果你的angular(或任何框架)应用程序中有模板,并且你通过HTTP请求/响应从后端返回HTML模板,那么你就是在前端和后端混合模板。
为什么不只是离开模板的东西要么在前端(我会建议),或在后端(相当不透明的imo)?
如果将模板放在前端,为什么不直接用JSON响应后端请求呢?您甚至不需要实现RESTful结构,但是将模板放在一边可以使代码更加透明。
当其他人不得不处理您的代码(甚至您自己在一段时间后重新输入自己的代码)时,这将会得到回报!
If you do it right, you will have small components with small templates, and best of all, if your code is imba, someone who doesn't know coding languages will be able to understand your templates and your logic! So additionally, keep your functions/methods as small you can. You will eventually find out that maintaining, refactoring, reviewing, and adding features will be much easier compared to large functions/methods/classes and mixing up templating and logic between the frontend and the backend - and keep as much of the logic in the backend if your frontend needs to be more flexible (e.g. writing an android frontend or switching to a different frontend framework).
哲学,伙计:)
附注:你不需要实现100%干净的代码,因为这是非常昂贵的——特别是如果你必须激励团队成员;) 但是:你应该在干净的代码和你已经拥有的代码之间找到一个很好的平衡(也许它已经很干净了)
如果可以的话,看看这本书,让它进入你的灵魂: https://de.wikipedia.org/wiki/Clean_Code
你也可以使用DOM属性绑定将angular组件的类属性与模板绑定。
例如:<div [innerHTML]="theHtmlString"></div>
使用规范形式如下:
<div bind-innerHTML="theHtmlString"></div>
Angular文档:https://angular.io/guide/template-syntax#property-binding-property
参见工作stackblitz示例
如果我错过了重点,我很抱歉,但我想推荐一种不同的方法:
我认为最好从服务器端应用程序返回原始数据,并将其绑定到客户端模板。这使得请求更加灵活,因为您只从服务器返回json。
对我来说,如果你所做的只是从服务器获取html并将其“原样”注入到DOM中,那么使用Angular似乎没有意义。
我了解Angular 1。x有一个html绑定,但我在Angular 2.0中还没有看到对应的绑定。不过他们以后可能会加进去。不管怎样,我还是会考虑为你的Angular 2.0应用提供一个数据api。
如果您感兴趣的话,这里有一些带有简单数据绑定的示例:http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples
我们总是可以将html内容传递给innerHTML属性以呈现html动态内容,但动态html内容也可能被感染或恶意。因此,在将动态内容传递给innerHTML之前,我们应该始终确保内容是经过消毒的(使用DOMSanitizer),这样我们就可以逃脱所有恶意内容。
试试下面的管子:
import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {
}
transform(value: string) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
Usage:
<div [innerHTML]="content | safeHtml"></div>
为了得到一个完整的答案,如果你的HTML内容是在一个组件变量中,你也可以使用:
<div [innerHTML]=componentVariableThatHasTheHtml></div>