[英]How to fetch a list of all svg files from an angular application directory?
I want to fetch a list of all .svg
files inside a specific folder of my Angular 4 application. 我想在Angular 4应用程序的特定文件夹中获取所有
.svg
文件的列表。 Therefore I am already declaring the folder in my angular-cli.json
file via 因此,我已经通过以下方式在我的
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...
How am I able now to read a list of all .png
files inside my ./assets/images
directory? 现在如何读取
./assets/images
目录中所有.png
文件的列表?
The list should be loaded inside a standard angular component. 该列表应加载到标准角度组件内。 Afterwards I want iterate over the list using a simple for loop.
之后,我想使用简单的for循环遍历列表。 I can do the last part by my own if some of you can tell me how to get the list.
如果你们中的某些人可以告诉我如何获取列表,我可以自己完成最后一部分。
EDIT 编辑
The content of the directory looks something like this 目录的内容看起来像这样
images
|--file_1.svg
|--file_2.svg
|--file_3.svg
└--file_4.svg
If I try to acces the url HOST:PORT/assets/images/file_1.svg the image is displayed correct, but if I try to list all files of the directory using HOST:PORT/assets/images an HTTP 404
occurs. 如果我尝试访问URL HOST:PORT / assets / images / file_1.svg,则图像显示正确,但是如果我尝试使用HOST:PORT / assets / images列出目录的所有文件,则会出现
HTTP 404
。
Here is the constructor of my component: 这是我组件的构造函数:
constructor(private http: Http) {
this.http.get('./assets/images').subscribe(res => console.log(res));
}
I have tried my best to find a solution for this but it appears impossible as Javascript does not have access to the file structure. 我已尽力找到解决方案,但是由于Javascript无法访问文件结构,因此似乎无法实现。 The best solution I can find is to create a list of icons in a json, request the file and then store the contents for later user.
我能找到的最佳解决方案是在json中创建图标列表,请求文件,然后将内容存储给以后的用户。
I have found this example. 我找到了这个例子。
As accessing file from assets
folder is easy, so we can exploit it 由于从
assets
文件夹访问文件很容易,因此我们可以利用它
and we can store an array of icon file names in the file say, icons.json
. 我们可以在图标
icons.json
文件中存储图标文件名称的数组。
1. Create icons.json
as following in the assets
folder- 1.在
assets
文件夹中创建以下icons.json
:
{ // ---------- icons.json---------
"icons-array" : ["icon-name1", "icon-name2", "icon-name3"]
}
2. Keep icon-name1.svg
, icon-name2.svg
, icon-name3.svg
file in the assets/icons
folder. 2.将
icon-name1.svg
, icon-name2.svg
, icon-name3.svg
文件icon-name3.svg
在assets/icons
文件夹中。
3. Read icons-json
file at start-up of the angular application. 3.在angular应用程序启动时读取
icons-json
文件。
How to read file at Angular Application Start-up 如何在Angular应用程序启动时读取文件
4. After reading icons.json
content, store value of icons-array
property into a global accessible array, say globalAccessibleIconsArray
. 4.读取
icons.json
内容后,将icons-array
属性的值存储到全局可访问数组中,例如globalAccessibleIconsArray
。
5. And use the array as- 5.并将数组用作-
for (const icon of globalAccessibleIconsArray) {
this.matIconRegistry.addSvgIconInNamespace(
'my-namespace',
icon,
domSanitizer.bypassSecurityTrustResourceUrl(`./assets/icons/${icon}.svg`)
);
}
So, for Adding a new icon 因此,对于添加新图标
assets/icon
folder, and assets/icon
文件夹中,然后 icons.json
file present in the assets
folder. assets
文件夹中存在的icons.json
文件中添加新文件名。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.