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

Question

如何使用 Typescript 获取文件夹中的所有文件名？ 这是一个有角度的 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 文件，您可以手动更新所有图标。

我找到了这个例子。

因为从

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 应用程序启动时读取文件

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

  文件中添加新文件名。

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
}

还包括我的

posts.ts

文件在

tsconfig.app.json

：

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

   将结束

   ]

   附加到文件中。