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...

我现在如何阅读.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));
}

Answer 1

我已尽力找到解决方案，但由于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.svg，icon-name2.svg，icon-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文件中添加新文件名。

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

1 个答案: