Question

我有一个angular2应用程序，它由多个组件组成，它在其模板中嵌入（param）不同的小svg文件。这种选择的原因是我需要与svg交互并操纵svg文件的内部DOM。另外我想引用一个svg文件，而不是在模板中使用内联svg多个位置，它在组件模板中更清晰。

我的问题是这些svg文件没有被缓存在浏览器中，并且当加载一个包含多个组件的页面（呈现这些svg文件）时，我注意到在页面加载完成之前有一些小的延迟。这远非最优，而且如果我无法解决这个问题，我会考虑回到内联svg。

我的目标是能够让组件模板指向svg文件，并且当第一次加载此组件时，它不会从服务器发送，而是从浏览器缓存中检索。希望这将解决我的延迟加载问题。我已经尝试在我的应用程序的根目录中定义一个cache.manifest文件（它定义了要缓存的不同svgs），但是当组件加载时，服务器仍在每次发送一个组件时发送svgs（和param.js）负载！

这就是我构建一个组件模板的方法，它由svg符号组成，当我点击svg符号时，我打开一个弹出窗口，其中应该包含相同的符号：

<div>
    <!--Header-->
    <div>{{ name }}</div>

    <!--Actual svg symbol Object-param style-->
    <div class="symbolIcon"(mouseup)="onMouseUp()" (mousedown)="onMouseDown()" >
        <object type="image/svg+xml" data="app/mySymbol.svg" >
                <param name='Activate' value={{activate}} /> 
                <param name='Status' value={{status}} /> 
        </object>
    </div>
</div>

<!--Placeholder for Popup-->
<modal-popup *ngIf="loadPopup" (command)="popupCmd($event);">
    <!--Symbol to be placed on Popup (same as in template above)-->
    <div class="modal-startstop-symbol">
        <!--Place content here...injected into "ng-content" in child-->
        <object type="image/svg+xml" data="app/mySymbol.svg" >
                <param name='Activate' value={{activate}} /> 
                <param name='Status' value={{status}} /> 
        </object>

    </div>
</modal-popup >

如何在浏览器

0 个答案: