如何从角度应用程序目录中获取所有svg文件的列表?

时间:2018-02-19 09:21:42

标签: javascript angular

我想获取Angular 4应用程序特定文件夹中所有.svg个文件的列表。因此,我已经通过

在我的angular-cli.json文件中声明了该文件夹
"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "favicon.ico",
        "assets",
        {
          "glob": "**/*.svg",
          "input": "../node_modules/..../assets/images",
          "output": "./assets/images"
        }
      ],
      "index": "index.html",
      "main": "ma...

我现在如何阅读.png目录中所有./assets/images个文件的列表?
该列表应加载到标准角度组件内。之后我想用一个简单的for循环遍历列表。如果有些人可以告诉我如何获取清单,我可以自己做最后一部分。

修改

目录的内容看起来像这样

images
|--file_1.svg
|--file_2.svg
|--file_3.svg
└--file_4.svg

如果我尝试访问网址HOST:PORT/assets/images/file_1.svg,则图片显示正确,但如果我尝试使用HOST:PORT/assets/images列出目录的所有文件,则会出现HTTP 404

这是我的组件的构造函数:

constructor(private http: Http) {
   this.http.get('./assets/images').subscribe(res => console.log(res));
}

1 个答案:

答案 0 :(得分:0)

我已尽力找到解决方案,但由于Javascript无法访问文件结构,因此似乎无法实现。我能找到的最好的解决方案是在json中创建图标列表,请求文件,然后将内容存储给以后的用户。

I have found this example.

因为从assets文件夹访问文件很容易,所以我们可以利用它
,并且可以在图标icons.json中存储图标文件名称的数组。

1。icons.json文件夹中创建assets,如下所示-

{  // ---------- icons.json---------
  "icons-array" : ["icon-name1", "icon-name2", "icon-name3"]
}

2。。将icon-name1.svgicon-name2.svgicon-name3.svg文件保存在assets/icons文件夹中。
3。。在角度应用程序启动时读取icons-json文件。
How to read file at Angular Application Start-up

4。。在读取icons.json内容之后,将icons-array属性的值存储到全局可访问数组中,例如globalAccessibleIconsArray
5。并将数组用作-

for (const icon of globalAccessibleIconsArray) {
      this.matIconRegistry.addSvgIconInNamespace(
        'my-namespace',
        icon,
        domSanitizer.bypassSecurityTrustResourceUrl(`./assets/icons/${icon}.svg`)
      );
    }


因此,用于添加新图标

  • 您必须将新的图标文件放在assets/icon文件夹中,然后
  • icons.json文件夹中的assets文件中添加新文件名。