0

我有一个*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>

这当前输出带有SVG 文件 URL 的<img>标签列表。src

相反，我更愿意实际内联 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']
4

1 回答 1

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.`);
    }
  }
}

然后您可以通过组件中的方法调用您的服务来获取此内容。

于 2018-06-27T17:46:22.383 回答