如何使用Typescript获取文件夹中的所有文件名？
这是一个角度2项目.
这是一个角度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>
我希望能够遍历照片文件夹中的任何文件,并将它们添加到images数组中.
这样我更新旋转木马所需要做的就是更改照片文件夹中的照片.
解决方法
我一直无法使用Javascript找到解决方案.看来JS没有能力读取文件结构.相反,您必须在数据库的后端保留一个列表,或创建一个json文件,您可以手动更新所有图标.
由于从assets文件夹访问文件很简单,所以我们可以利用它,我们可以在文件中存储一组图标文件名,例如icons.json.
1.在assets文件夹中创建如下的icons.json-
{ // ---------- icons.json---------
"icons-array" : ["icon-name1","icon-name2","icon-name3"]
}
2.将assets-name1.svg,icon-name2.svg,icon-name3.svg文件保存在assets / icons文件夹中.
3.在启动角度应用程序时读取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文件中添加新文件名.
