SVG在Angular应用中使用数据更新

Question

我正在使用Angular 4中的应用程序。在一个视图中，我正在使用从API请求中检索的数据之间放置一些svgs。它看起来像这样：

<div>
  <div>
     <svg><use xlink:href="./assets/svg/machine.svg#message-icon"></use></svg>
  </div>
  <div>{{machine.state}}</div>
  <div>
     <svg><use xlink:href="./assets/svg/machine.svg#settings-icon"></use></svg>
  </div>
</div>

所有svgs都放在一个文件（machine.svg）中，并在＆lt;符号＆gt;带有ids的标签。

现在我的问题是当我每隔2秒设置一次间隔来更新API请求中的数据时，我的svg图标会在每次更新时闪烁，但它只发生在Chrome中。

我检查了网络日志，似乎每个API请求都下载了整个svg文件：

在Mozilla中一切正常，svg只下载一次：

我试过将svg放入＆lt;对象＆gt;标签，但请求更多。将每一个svg放入＆lt; img＆gt;标签似乎解决了请求的问题，但我更愿意控制“填充”属性。将整个svg直接放在页面上也解决了问题，但它似乎不是一个干净的解决方案。

我的问题是，如果有一种方法可以从文件中检索svg，而不是Chrome不断下载吗？

Answer 1

尝试将服务器配置为向这些请求添加cache-control标头。我在localhost上遇到了相同的问题，但是在我的生产服务器上，图标带有cache-control: max-age=172800标头，并且不再需要重新请求。

Answer 2

面对这种情况，对我来说最简单的方法是创建一个单独的共享组件，该组件包含我需要的所有图标并采用我需要的参数。对我来说，这是最快，最灵活的解决方案。

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() {}
}

用法：

<ngx-svg-icon [icon]="'settings'" [fill]="'#ededed'"></ngx-svg-icon>