使用Typescript获取资产文件夹中的文件名列表

Question

如何使用Typescript获取文件夹中的所有文件名？这是一个有角度的2项目。

更具体地说，我要使用的是我的photos文件夹中的图像来设置引导轮播的图像。目前，我正在这样做：

private _images: Image[] = []

ngOnInit(): void {
    this._images = [
        { "title": "Slide 1", "url": "../photos/carousel/gg_slide 1.jpg" },
        { "title": "Slide 2", "url": "../photos/carousel/gg_slide 2.jpg" },
        { "title": "Slide 3", "url": "../photos/carousel/gg_slide 3.jpg" },
        { "title": "Slide 4", "url": "../photos/carousel/gg_slide 4.jpg" },
        { "title": "Slide 5", "url": "../photos/carousel/gg_slide 5.jpg" }
    ]
}//ngOnInit 

然后像这样在html文件中使用images数组：

<carousel>
    <slide *ngFor="let img of _images">
        <img src="{{img.url}}" alt="{{img.title}}">
    </slide>
</carousel>

我希望能够遍历photos文件夹中的所有文件并将它们添加到images数组。这样，更新轮播所需要做的就是更改photos文件夹中的照片。

Answer 1

我一直无法找到使用 Javascript 的解决方案。看来JS不具备读取文件结构的能力。相反，您必须在数据库后端保留一个列表，或者创建一个 json 文件，手动更新所有图标。

我找到了这个例子。

由于从文件夹访问文件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在 Angular 应用程序启动时读取文件。
     如何在 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文件夹中，并且
• icons.json在文件夹中存在的文件中添加新文件名assets。