Angular 正在加载要在ngFor中显示的SVG文件内容

我有一个

*ngFor

循环，循环遍历一系列

布局

。

布局中的每个元素都是SVG文件的URL

<div *ngFor="let layout of layouts; let i = index;" class="layout" (click)="selectLayout(layout.url)">
    <img src="{{ layout.url }}">
</div>

有没有办法做到这一点？在PHP中，我将使用
file\u get\u contents
函数加载URL的内容

编辑

例如，我的
布局
数组包含

['assets/images/file-1.svg', 'assets/images/file-2.svg', 'assets/images/file-3.svg', 'assets/images/file-4.svg']

如果我理解正确，您希望显示svg以轻松地对其进行样式设置，您可以利用FileReader（）提供的机会，在组件中使用一个方法或更高的方法来读取每个文件并提取其内容以在svg中显示

但是，通过这样做，您必须对要显示的每个svg进行http调用，根据您的列表，调用可能很重。您是否可以在本地存储这些SVG

编辑：

如果要这样做，我将创建一个ts文件，其中包含我的所有svg和所有svg的映射：

export const sunSvg = "<svg**>"
export const grassSvg = "<svg**>"

export const svgMaps = {
  sun: { svg: sunSvg},
  grass: { svg: grassSvg}
}

export const sunSvg=“”
export const grassSvg=“”
导出常量svgmap={
sun:{svg:sunSvg}，
草：{svg:grassSvg}
}

我还将创建一个服务来管理svg内容的获取：

import { svgMaps } from './svg';

export class SvgElements {
  getSvgElement(element) {
    if (svgMaps[element]) {
      return svgMaps[element].svg;
    } else {
      console.log(`The svg |> ${element} <| does not have a handler.`);
    }
  }
}

从“/svg”导入{svgMaps}；
出口类商品{
getSvgElement（元素）{
if（svgmap[元素]）{
返回svgmap[element].svg；
}否则{
log（`svg |>${element}谢谢。我正在本地存储svg。我只需要一种方法来在线显示它们。你能用svg存储文件的摘要更新你的答案吗？否则，请探索FileReader和renderer2提供的选项，将svg插入文件中。我在我的答案中添加了一个解决方案，如果你想保留单独的文件，你需要se文件阅读器API！
import { svgMaps } from './svg';

export class SvgElements {
  getSvgElement(element) {
    if (svgMaps[element]) {
      return svgMaps[element].svg;
    } else {
      console.log(`The svg |> ${element} <| does not have a handler.`);
    }
  }
}