我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
如果你的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
其他回答
如果你想在Angular 2或Angular 4中使用它,同时还想保持内联CSS,那么你可以使用它
<div [innerHTML]="theHtmlString | keepHtml"></div>
如果你的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
为了得到一个完整的答案,如果你的HTML内容是在一个组件变量中,你也可以使用:
<div [innerHTML]=componentVariableThatHasTheHtml></div>
<div [innerHTML]=“HtmlPrint”></div><br>
innerHtml是HTML-Elements的一个属性,它允许你以编程的方式设置它的html-content。还有一个innerText属性,它将内容定义为纯文本。
属性周围的[attributeName]="value"方括号定义了一个Angular输入绑定。这意味着,属性的值(在您的例子中是innerHtml)绑定到给定的表达式,当表达式结果改变时,属性值也会改变。
所以基本上[innerHtml]允许你绑定和动态改变给定html元素的html内容。
你也可以使用DOM属性绑定将angular组件的类属性与模板绑定。
例如:<div [innerHTML]="theHtmlString"></div>
使用规范形式如下:
<div bind-innerHTML="theHtmlString"></div>
Angular文档:https://angular.io/guide/template-syntax#property-binding-property
参见工作stackblitz示例