Question

我正在使用angular2创建chrome扩展。我有几个SVG文件的img文件夹。有没有办法一次导入所有svg文件并在任何html模板中单独使用它们？

例如在c＃应用程序中，我可以像这样导入_layout.cshtml：

@Html.Raw(System.IO.File.ReadAllText(Enviroment.WebRootPath + "/img/img.svg"))

从所有svg文件生成img.svg然后我可以像这样使用它：

<svg class="icon" style="fill: red;"><use xlink:href="#grid" /></svg>

有没有办法做这个我的chrome扩展angular2应用程序？

顺便说一句，如果这有帮助，我会使用webpack ...

Answer 1

要在运行时读取扩展包目录，请使用chrome.runtime。getPackageDirectoryEntry：

function readFiles(path, extension) {
    return new Promise(resolve => {
        chrome.runtime.getPackageDirectoryEntry(root => {
            const rootLen = root.fullPath.length;
            root.getDirectory(path.replace(/^\//, ''), {create: false}, dir => {
                dir.createReader().readEntries(entries => {
                    Promise.all(entries
                        .filter(e => e.isFile && e.name.endsWith(extension))
                        .map(e => {
                            const url = chrome.runtime.getURL(e.fullPath.substr(rootLen));
                            return fetch(url)
                                .then(r => r.text())
                                .then(text => ({text, name: e.name}));
                        })
                    ).then(resolve);
                });
            });
        });
    });
}

用法：

readFiles('/img', '.svg').then(svgs => {
    svgs.forEach(svg => {
        // svg.name is the file name
        // svg.text is the file contents
        ................
    });
});

或

readFiles('/img', '.svg').then(svgs => {
    document.body.insertAdjacentHTML('beforeend', svgs.map(svg => svg.text).join(''));
});

一次性在Angular2中添加SVG

1 个答案: