如何從角度應用程序目錄中獲取所有svg文件的列表？

Question

我想在Angular 4應用程序的特定文件夾中獲取所有.svg文件的列表。 因此，我已經通過以下方式在我的angular-cli.json文件中聲明了該文件夾

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "favicon.ico",
        "assets",
        {
          "glob": "**/*.svg",
          "input": "../node_modules/..../assets/images",
          "output": "./assets/images"
        }
      ],
      "index": "index.html",
      "main": "ma...

現在如何讀取./assets/images目錄中所有.png文件的列表？
該列表應加載到標准角度組件內。 之后，我想使用簡單的for循環遍歷列表。 如果你們中的某些人可以告訴我如何獲取列表，我可以自己完成最后一部分。

---

編輯

目錄的內容看起來像這樣

images
|--file_1.svg
|--file_2.svg
|--file_3.svg
└--file_4.svg

如果我嘗試訪問URL HOST：PORT / assets / images / file_1.svg，則圖像顯示正確，但是如果我嘗試使用HOST：PORT / assets / images列出目錄的所有文件，則會出現HTTP 404 。

這是我組件的構造函數：

constructor(private http: Http) {
   this.http.get('./assets/images').subscribe(res => console.log(res));
}

Answer 1

我已盡力找到解決方案，但是由於Javascript無法訪問文件結構，因此似乎無法實現。 我能找到的最佳解決方案是在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文件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文件中添加新文件名。