Question

我有一个*ngFor循环，该循环遍历layouts的数组。 layouts中的每个元素都是指向SVG文件的URL。

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

这当前会输出<img>标签列表，其中src是SVG文件的URL。

相反，我希望实际上是内联SVG文件，例如

<div>
    <svg>blah1</svg>
    <svg>blah2</svg>
    <svg>blah3</svg>
    <svg>blah4</svg>
</div>

有什么办法可以做到这一点？在PHP中，我将使用file_get_contents函数来加载URL的内容。

编辑

例如，我的layouts数组包含...

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

Answer 1

如果我理解正确，则希望显示svg以轻松设置其样式，可以利用FileReader（https://developer.mozilla.org/en-US/docs/Web/API/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}
}

我还将创建一个服务来管理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文件的内容以在ngFor中显示

1 个答案: