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

Question

我想在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...

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

---

编辑

目录的内容看起来像这样

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

如果我尝试访问URL 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));
}

Answer 1

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

我找到了这个例子。

由于从assets文件夹访问文件很容易，因此我们可以利用它
我们可以在图标icons.json文件中存储图标文件名称的数组。

1.在assets文件夹中创建以下icons.json ：

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

2.将icon-name1.svg ， icon-name2.svg ， icon-name3.svg文件icon-name3.svg在assets/icons文件夹中。
3.在angular应用程序启动时读取icons-json文件。
如何在Angular应用程序启动时读取文件

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文件夹中，然后
• 在assets文件夹中存在的icons.json文件中添加新文件名。