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

【问题标题】：How to fetch a list of all svg files from an angular application directory?如何从角度应用程序目录中获取所有 svg 文件的列表？
【发布时间】：2018-02-19 09:21:41
【问题描述】：

我想在我的 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));
}

【问题讨论】：

标签： javascript angular

【解决方案1】：

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

I have found this example.

因为从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 文件保存在assets/icons 文件夹中。
3. 在 Angular 应用程序启动时读取 icons-json 文件。
How to read file at Angular Application Start-up

4. 阅读icons.json 内容后，将icons-array 属性的值存储到全局可访问数组中，例如 @ 987654335@。
5. 并将数组用作-

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

所以，对于添加新图标

你必须把新的图标文件放在assets/icon文件夹中，然后
在assets 文件夹中的icons.json 文件中添加新文件名。

【讨论】：