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

【问题标题】：Get list of filenames in assets folder with Typescript使用 Typescript 获取资产文件夹中的文件名列表
【发布时间】：2017-12-26 12:53:39
【问题描述】：

如何使用 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 文件中的 images 数组：

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

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

【问题讨论】：

浏览器中没有文件夹。请更具体地说明您要完成的工作。
这取决于您的代码在哪里运行（浏览器与服务器），与 Typescript 无关。
我猜 OP 正在尝试构建一个 UI，他可以在其中从本地文件夹中选择一个文件。
您需要自定义您的 Web 服务器，以便它提供一个 API，允许您发出 HTTP 请求并获取返回的文件列表（例如作为数组），然后您可以使用组件就像您的问题中显示的那样显示它。如果没有特殊的服务器支持，您将不走运。浏览器在客户端运行，目录在服务器上，因此浏览器不从服务器获取信息就无法知道目录。
我真的不知道它存在，但应该有一个 webpack 加载器 扫描指定文件夹并在构建时静态创建 url 数组。这可以替代创建每次打开页面时返回此类数组的 API。

标签： angular typescript1.8

【解决方案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 属性的值存储到全局可访问数组中，例如 @ 987654335@。
5. 并将数组用作-

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

所以，对于添加新图标

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

【讨论】：