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

发布时间：2020-12-17 16:59:47 所属栏目：安全来源：网络整理

导读：如何使用Typescript获取文件夹中的所有文件名？这是一个角度2项目. 更具体地说,我要做的是使用我的照片文件夹中的图像为引导轮播设置图像.目前我这样做： private _images: Image[] = []ngOnInit(): void { this._images = [ { "title": "Slide 1","url": "

如何使用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文件中使用images数组,如下所示：

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

我希望能够遍历照片文件夹中的任何文件,并将它们添加到images数组中.
这样我更新旋转木马所需要做的就是更改照片文件夹中的照片.

解决方法

我一直无法使用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.将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文件中添加新文件名.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!