angular - 使用 Typescript 获取 Assets 文件夹中的文件名列表

Question

如何使用 Typescript 获取文件夹中的所有文件名？它适用于 Angular 2 项目。

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

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 文件中使用图像数组:

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

我希望能够循环遍历照片文件夹中的任何文件，并将它们添加到图像数组中。这样一来，我更新轮播所需要做的就是更改照片文件夹中的照片。

Answer 1

我一直找不到使用 Javascript 的解决方案。看来JS没有读取文件结构的能力。相反，您必须在后端的数据库中保留一个列表，或者创建一个 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 属性的值存储到一个全局可访问数组中，例如 globalAccessibleIconsArray。
5. 并将数组用作-

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

因此，对于添加新图标

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