如何从本地存储中保存和加载包含两个angular2组件的页面？

Question

我一直在尝试使用下一个代码从本地存储中保存和加载包含两个angular2组件的页面，但是从未应用过来自组件的CSS。

这是我要保存的代码：

localStorage.setItem('body', JSON.stringify(document.getElementById("body").innerHTML));

这是我要加载的代码：

document.getElementById("body").innerHTML=JSON.parse(localStorage.getItem("body"));

我希望能很好地解释我的问题

Answer 1

抱歉，您不能这样做。 Angular喜欢接管很多DOM，因此您不能只替换整个DOM。 但是，如果不是做整个“身体”，而是做了一个子集，则可以这样做：

<div [innerHTML]="htmlVar">
</div>

其中htmlVar是您加载的变量，例如：

this.htmlVar = JSON.parse(localStorage.getItem("htmlVar"))

请注意，默认情况下，innerHTML会删除很多“不安全”的html。 您可以通过调用DomSanitizer重新启用其中的大多数功能。 请注意，您不能使用html中的任何Angular功能，如routerLink的链接。