Я работаю над приложением на Angular 4. В одном представлении я использую svgs, помещенные между данными, полученными из запроса API. Это выглядит так:

{amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;svg{amp}gt;{amp}lt;use xlink:href="./assets/svg/machine.svg#message-icon"{amp}gt;{amp}lt;/use{amp}gt;{amp}lt;/svg{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;{{machine.state}}{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;svg{amp}gt;{amp}lt;use xlink:href="./assets/svg/machine.svg#settings-icon"{amp}gt;{amp}lt;/use{amp}gt;{amp}lt;/svg{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Все svgs помещаются в один файл (machine.svg) и определяются в тегах {amp}lt;symbol{amp}gt; с идентификаторами.

Теперь моя проблема заключается в том, что когда я устанавливаю интервал каждые 2 секунды для обновления данных из запроса API, значки svg мерцают при каждом обновлении, но это происходит только в Chrome.

Я проверил сетевые журналы, и кажется, что весь файл SVG загружается с каждым запросом API:

введите описание изображения здесь

В то время как в Mozilla все работает нормально, svg скачивается только один раз:

введите описание изображения здесь

Я пытался поместить svg в тег {amp}lt;object{amp}gt;, но запросы еще более многочисленны. Размещение каждого тега svg в теге {amp}lt;img{amp}gt;, похоже, решало проблему с запросами, но я бы предпочел контролировать свойство fill. Размещение всего svg непосредственно на странице тоже решило проблему, но это не кажется чистым решением.

У меня вопрос: есть ли способ извлечь svg из файла, если Chrome не загружает его постоянно?

Попробуйте настроить сервер для добавления заголовков cache-control к этим запросам. У меня такая же проблема на локальном хосте, но на моем cache-control: max-age=172800 сервере значки поставляются с заголовком cache-control: max-age=172800 и больше не запрашиваются повторно.

Также, столкнувшись с этой ситуацией, для меня проще всего создать отдельный общий компонент, который содержит все нужные мне значки и который принимает нужные мне параметры. Для меня это самое быстрое и гибкое решение.

 import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'ngx-svg-icon', templateUrl: './svg-icon.component.html', styleUrls: ['./svg-icon.component.scss'] }) export class SvgIconComponent implements OnInit { @Input() icon: string; @Input() fill: string; constructor() {} ngOnInit() {} } 

Использование:

 {amp}lt;ngx-svg-icon [icon]="'settings'" [fill]="'#ededed'"{amp}gt;{amp}lt;/ngx-svg-icon{amp}gt;