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

Question

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

更具体地说，我要做的是使用来自我的照片文件夹的图像设置Bootstrap轮播的图像。 目前我正在执行以下操作：

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”文件夹中的照片即可更新旋转木马。

- ShanieMoonlight

---

浏览器中没有文件夹。请更具体地说明您尝试实现什么。 - Günter Zöchbauer

这取决于你的代码运行在哪里（浏览器还是服务器），与Typescript无关。 - SLaks

我猜测 OP 正试图构建一个用户界面，以便从本地文件夹中选择文件。 - Vega

您需要定制您的Web服务器，以便它提供一个API，允许您发出HTTP请求并返回文件列表（例如作为数组），然后您可以使用像问题中展示的组件来显示它。如果没有特殊的服务器支持，您就会失去这个机会。浏览器在客户端上运行，目录在服务器上，因此浏览器无法获取关于目录的信息而不从服务器获取信息。 - Günter Zöchbauer

我不确定是否存在这样的东西，但应该有一个webpack loader可以在构建时扫描指定文件夹并创建URL数组。这可能是创建API的替代方案，每次打开页面时返回这样的数组。 - Tomasz Błachut

Answer 1

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

我发现了这个例子。

由于从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文件。
    如何在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 文件夹中，并且
• 在 assets 文件夹中的 icons.json 文件中添加新文件名。

- Jeremy

---

我认为在构建时间/服务时间自动生成此JSON应该也是可能的，因为Node.js文件管理API应该是可用的。 - Shachar Har-Shuv

Answer 2

我解决了一个类似的问题，想要读取位于 src/assets/posts/ 下的所有静态博客文章文件的方法是将这些读入到 posts.ts 文件中作为构建步骤：

"scripts": {
     ...
    "pre-build": "echo 'export default [' > posts.ts; ls src/assets/posts/ | tac | awk '{ print \"\\\"\"$0\"\\\",\"}' >> posts.ts; echo ']' >> posts.ts;",
    "build": "npm run pre-build && ng build",
  },

然后在 Angular 中，我从 posts.ts 读取：

import posts from "../../../posts"

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit {

  originalPosts = posts;
  
  // rest of the class
}

还在tsconfig.app.json文件中包含了我的posts.ts文件：

  ...
  "files": [
    "src/main.ts",
    "posts.ts"
  ],
  ...

---

关于pre-build命令的解释：它由3个bash命令组成：

1. echo 'export default [' > posts.ts;：清空文件并将export default [写入到posts.ts中。
2. ls src/assets/posts/ | tac | awk '{ print "\""$0"\","}' >> posts.ts;：列出src/assets/posts/中的所有文件名，反向排序（使用tac），用引号括起来（使用awk），并追加到posts.ts中。
3. echo ']' >> posts.ts;：在文件末尾追加闭合的]。

---

此解决方案类似于先前答案中的解决方案，但具有不将任何值硬编码到 json 中（容易出错）的优点，而是在构建过程中自动完成。

- J Asgarov

---

注意：这需要通过类似于sh的控制台运行构建脚本，并在您的系统中安装必要的工具。通过仅使用npm或node实现相同功能的解决方案（例如使用fs.readdirSync）将更加灵活。 - undefined