Question

是否可以将整个静态文件目录绑定到angular 4应用程序？这背后的意图是动态获取此目录的内容以查看目录中的文件。

我知道可以使用

将目录绑定到应用程序

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

使用上述方法，您只能通过明确调用文件来解决这些问题。 HOST:PORT/assets/images/myImage.svg

所以问题是：
是否可以绑定目录，因此我可以调用HOST:PORT/assets/images并动态获取所有包含的文件？

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

Answer 1

答案简短：不。

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

在tools或类似目录中添加枚举器脚本。 E.g。

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中运行该脚本。 E.g。

"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时重新运行它。并调整路径。

如何将静态目录绑定到角度4应用程序

1 个答案: