javascript - 如何将静态目录绑定(bind)到 Angular 4 应用程序

Question

是否可以将静态文件的整个目录绑定(bind)到 Angular 4 应用程序？其背后的目的是动态获取该目录的内容，以查看该目录内有哪些文件。

我知道可以使用以下方式将目录绑定(bind)到应用程序

"assets": [
    "favicon.ico",
    "assets",
    {
      "glob": "**/*.svg",
      "input": "../node_modules/@myModule/assets/images",
      "output": "./assets/images"
    }
  ]

使用上述方法，您只能通过显式调用文件来寻址文件，例如主机:PORT/assets/images/myImage.svg

所以问题是:
是否可以绑定(bind)目录，以便我能够调用 HOST:PORT/assets/images 并动态获取所有包含的文件？

如果没有: 是否有另一种方法可以从 Angular 应用程序中的静态目录动态获取所有文件？

Answer 1

简短的回答:不。

答案较长，不是开箱即用的。图标(如您的评论中提到的)可以访问，但不可列出。因此，您可以在构建时创建一个图标列表，如下所示。

在您的 tools 或类似目录中添加枚举器脚本。例如

const fs = require('fs');
const readdirSync = fs.readdirSync;
const writeFileSync = fs.writeFileSync;
const files = readdirSync('src/assets/svg');
const jsonObj = { files };
writeFileSync('src/app/svg-files.json', JSON.stringify(jsonObj, null, 2));

在 package.json 中运行该脚本。例如

"scripts": {
  ...
  "listSvgs": "node tools/list-svgs"
}

在 package.json 的 build 管道中运行该脚本:

"scripts": {
  ...
  - "build": "ng build -p",
  + "build": "npm run listSvgs && ng build -p"
  ...
}

(我想，你会知道哪条线出去，哪条线进来。)

首次手动生成文件，这样您就不会忘记(npm run listSvgs)。

添加服务来获取 Angular 代码中的文件:

@Injectable
export class SVGListingService {
    constructor(private httpClient: HttpClient) {}
    getSVGs() {
        return this.http.get('svg-files.json');
    }
}

你应该能够使用它，记得在添加 svgs 时重新运行它。并调整路径。