Angular - 带有样式的 InnerHtml
Posted
技术标签:
【中文标题】Angular - 带有样式的 InnerHtml【英文标题】：Angular - InnerHtml with styles 【发布时间】：2019-12-21 22:43:07 【问题描述】：我有这个……
const htmlVar = "<html>
<div style="display:flex">
<div>
<h1>Hello World</h1>
</div>
</div>
";
在我的 html 上我有这个..
<div [innerHtml]="htmlVar"></div>
它可以渲染一切，但样式:(
我尝试了这个链接的解决方案：style not working for innerhtml in Angular 2 Typescript
但它不起作用。可能是因为太旧了。
有什么线索吗？
【问题讨论】：
考虑使用DomSanitizer 来让它工作。 Adiv 不能包含 head 或 body，这是无效的 HTML
是的，@Liam..刚刚编辑过......但这不是问题。仍在继续
【参考方案1】：
正如@R.Richards 提到的，使用DomSanitizer：
import DomSanitizer, SafeHtml from '@angular/platform-browser';
.
.
.
htmlVar: SafeHtml;
constructor(protected _sanitizer: DomSanitizer)
this.htmlVar = this._sanitizer.bypassSecurityTrustHtml(`
<html>
<head></head>
<body>
<div style="display:flex; color: red;">
<div>
<h1>Hello World</h1>
</div>
</div>
</body>
</html>`);
我创建了一个stackblitz 来说明
另外，正如@liam 已经提到的，您不应该将<html>、<header> 或<body> 标记为DIV 的孩子
【讨论】：
以上是关于Angular - 带有样式的 InnerHtml的主要内容，如果未能解决你的问题，请参考以下文章