Question

tltr：我可以从angular访问资产目录吗？

我在src/assets/icons中使用的文件夹mat-icon中有一堆SVG。唯一的缺点是，当我添加一个新图标时，我必须添加文件，并且必须将文件名添加到一个数组中，该数组用来循环将其添加到matIconRegistry中。有没有一种方法可以简单地从目录中读取所有文件？

这是我当前的解决方案：

@NgModule()
export class CustomIconModule {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    const icons = [
      'icon1', 'icon2',
    ];

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

更新：我编写了一个bash脚本，该脚本循环遍历该文件，生成一个包含所有文件名数组的.ts文件，并执行git add。我在预提交的git钩子中运行它。并不理想，但目前还可以。不过，我很想找到一个纯JS解决方案。

Answer 1

因为从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文件。
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文件夹中，然后
在icons.json文件夹中的assets文件中添加新文件名。

角度：从资产文件夹读取所有文件

1 个答案: