在我的整个应用程序中，我总是无法正确显示我的 svg，有时它显示所有图标，有时什么也不显示，有时显示 50%。不明白为什么。
这是一个例子，当我进入我的页面时，经常会显示图标(但并非总是):
然后，当我通过我的应用程序(延迟加载)导航到另一个菜单并返回时，结果如下:
另一个正在运行的 GIF:这里我只是在我的应用程序内切换选项卡(延迟加载)(仅供引用，此 GIF 已被裁剪，您看不到我单击的选项卡，它位于此图像之外)您可以看到有时它显示图标有时不显示，不知道从spirit链接svg是如何工作的，但是有一个图标永远不会从我的symbols.svg中消失，称为“#mark_all_as_read”，但是它们都具有相同的语法:
我在index.html内添加了一个图标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 上是 Angular 还是 Angular-CLI开发模式，或浏览器问题
这里我有笨蛋https://embed.plnkr.co/dQJIX2lMw8WOl9rQepGX/但它每次都有效(请切换“主页”和“关于”菜单)
更多信息:
这是 dom 工作时的样子:
这里当chrome不显示它时:
我的列表中的菜单代码: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时在我的其中一个
继续:真的想知道为什么在
&& ecrituresAVerifier?.length 中出现第二个条件在我的 ng 中，如果浏览器进行另一次调用，如果我删除它，它只会进行一次调用!
browsers impacted by this bug?
实际在 chrome 最新版本上进行了测试 看来它一直在 FIREFOX 上运行!
浏览器: - [最后] Chrome(桌面)
Angular 版本& co: @ Angular/cli:1.4.2 节点:6.11.0 操作系统: win32 x64 @ Angular/* 4.4.3 typescript :2.3.4
最佳答案
我也遇到了这个问题，并尝试了很多不同的方法来解决这个问题，但真正有帮助的是在 app.component.ts 中定义所有 svg 图标并在应用程序中的任何地方使用它们。我之前已经在相应组件的 TS 文件中定义了图标。 后来，当我将它们移至 app.component.ts 时，所有图标都工作正常。如果有帮助请告诉我。
还在构造函数中使用 IconRegistry 定义图标并像这样使用它(如果您使用的是 Angular Material )<mat-icon svgIcon="icon.svg"></mat-icon>或<i class="material-icons">icon.svg</i>
关于angular - Svg 并不总是显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47143603/