Svg并不总是显示

时间:2017-11-06 18:42:08

标签: angular svg

在我的整个应用程序中,我总是有问题正确显示我的svg,有时它显示所有图标,有时没有,有时50%显示。不要'理解为什么。

这是一个例子,当我进入我的页面时,通常会显示图标(但并非总是如此): image

然后当我通过我的应用程序(延迟加载)导航到另一个菜单并返回时,这里的结果如下: image

另一个GIF在行动:在这里我只是在我的应用程序中切换标签(延迟加载)(仅供参考,这个GIF是假的,你看不到我点击的标签,它在这张图片之外)你可以看到有时它显示图标有时不是,不知道如何链接svg与精神的作用,但有一个图标永远不会消失称为" #mark_all_as_read"从我的symbols.svg但是所有语法都相同: svg error2

我在index.html中的spirite.symbols.svg中添加了一个图标X,就在标记始终显示之前但是当我移动某个模块(延迟加载)时,我有这个相同的X图标,有时会显示,有时候不!

这种行为对于我在精神上使用svg的所有图标都是一样的,如下所示: <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/utility-sprite/svg/symbols.svg#list"></use> </svg>

和我链接的文件是:symbols.zip

不知道它是ng s开发模式下的角度或角度cli,还是浏览器问题 在这里我有plu https://embed.plnkr.co/dQJIX2lMw8WOl9rQepGX/但它每次都有效(请切换HOME和ABOUT菜单)

更多信息: 这是工作时的dom: image

这里当chrome没有显示出来时: image

我在列表中的菜单代码:https://gist.github.com/istiti/9981daf8bc07f121401733bc6272e4a1

此处的代码,其中图标不会始终显示 <li routerLinkActive="slds-is-active" [routerLinkActiveOptions]="{exact: true}" *ngIf="'ACCOUNTING_WRITINGS' | permissions" class="slds-nav-vertical__item"> <a [routerLink]="['ecriturecomptable']" class=" slds-nav-vertical__action slds-text-link--reset" aria-describedby="entity-header"> <span class="slds-icon_container slds-icon-utility-open_folder slds-line-height_reset"> <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/icons/utility-sprite/svg/symbols.svg#list"></use> </svg> </span> <ng-container i18n>Liste écritures comptable</ng-container> </a> </li>

这个图标似乎总是只显示另一个ngIf:*ngIf="('ACCOUNTING_WRITINGS' | permissions:'WRITE') && ecrituresAVerifier?.length"

另一个重要信息: 这很奇怪,当我导航到一条路线时,我的浏览器会对相同的symbols.svg文件进行两次http调用   当我在其中一个

  • 浏览器中删除&& ecrituresAVerifier?.length时,只能正确拨打一个电话,所有图标似乎都会一直显示!注意:在ngIf

    中的第二个条件下,它适用于firefox事件

    要恢复:真的很想知道为什么在

  • && ecrituresAVerifier?.length的第二个条件中我的浏览器会再次拨打电话如果我将其删除则只拨打一个电话!< p>

      

    受这个bug影响的浏览器?

    实际上在chrome上一个版本进行了测试 它似乎一直适用于FIREFOX!

    浏览器: - [last] Chrome(桌面版)

    角度版本&amp;合作: @ angular / cli:1.4.2 节点:6.11.0 os:win32 x64 @ angular / * 4.4.3 打字稿:2.3.4

  • 1 个答案:

    答案 0 :(得分:0)

    我也遇到了这个问题,并尝试了许多不同的方法来解决该问题,但是真正有用的是在app.component.ts中定义所有svg图标,并在应用程序中的任何地方使用它们。我之前已经在相应组件的TS文件中定义了图标。 稍后,当我将它们移至app.component.ts时,所有图标都可以正常工作。让我知道是否有帮助