管理HTML

Question

我正在处理一个场景，我需要根据条件应用一些设置，如果条件为false，需要以不同的方式显示相同的内容。一切都工作正常，除了它在所有html文件中导致了很多重复的代码。实际上，我正在使用angular5 / Typescript + ionic / Cordova开发跨平台应用程序。

请考虑以下示例：

<ion-slides pager [hidden]='!isMobileDevice'>
    <ion-slide>
        <div id="div1">some contents</div>
    </ion-slide>
    <ion-slide>
        <div id="div2">more contents</div>
    </ion-slide>
</ion-slides>

<div [hidden]='isMobileDevice'>
    <div id="div1">some contents</div>
    <div id="div2">more contents</div>
</div>

在上面的代码中，同一块代码正在两个地方被复制，因为这些div1和div2是完整的页面所以它的代码很多。只是想知道是否有一些解决方法，我可以用来避免我的页面中的这种重复。任何帮助/建议都将受到高度赞赏。

Answer 1

稍微笨拙的方法是使用 iframe 。如果您配置了PHP，则可以使用 include 。还有 JQuery ，它们会做类似的事情。 您可以在多个地方调用两个单独的页面 somecontents.html 和 morecontents.html ，而不会重复。