我正在創建一個設計庫，并希望在其中包含一些基本的 SVG，這樣如果用戶不添加/覆寫，它們仍將顯示為備份。
我在我的庫中創建了一個檔案夾
assets/
=> svg/
=> alert.svg
=> success.svg
=> trash.svg
=> ...
然后我將此檔案夾添加到 ng-package.json
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/libs/ui",
"assets": ["src/assets"],
"lib": {
"entryFile": "src/index.ts"
}
}
然后我想在我的庫中加載那些 svg，所以在我的模塊檔案夾中我這樣做：
constructor(private iconReg: SvgIconRegistryService) {
Object.entries({
alert: 'assets/svg/alert.svg',
info: 'assets/svg/info.svg',
success: 'assets/svg/success.svg',
warning: 'assets/svg/warning.svg',
}).forEach(([key, value]) => {
this.iconReg.loadSvg(value, key)?.subscribe();
});
}
可悲的是，使用該庫時找不到 src ：
訊息：“http://localhost:4200/assets/svg/success.svg 的 Http 失敗回應：404 Not Found”名稱：“HttpErrorResponse”
uj5u.com熱心網友回復：
首先在您的ng-package.josn匯出資產中，如下所示：
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/libs/ui",
"assets": ["./assets"],
"lib": {
"entryFile": "src/index.ts"
}
}
tsconfig.lib.json路徑在角度庫中不起作用，因此在您更改后，您可能必須手動編輯具有相對路徑的資產的匯入。
現在運行ng build custom-project --prod。然后它會出現在您的 dist 檔案夾中。
然后，將這些檔案添加到您的angular.json檔案中：
{
"assets": [
{
"glob": "**/*",
"input": "./node_modules/your-project/assets",
"output": "/assets/"
}
],
"styles" : [
"node_modules/your-project/assets/css-file.css"
],
"scripts" : [
"node_modules/your-project/assets/js-file.js"
]
}
uj5u.com熱心網友回復：
我可以建議的一種替代方法是，您可以只創建一個組件，而不是匯出檔案。在 html 部分，您可以放置?? svg 檔案內容并使用輸入引數訪問它們。可能通過傳遞 svg 名稱您可以訪問它們。甚至 svg 的其他樣式引數也可以保留為組件的輸入。
uj5u.com熱心網友回復：
我建議您創建一個 html 和組件以及 css 檔案。然后將您的 svg 復制到帶有svg 標簽的 html 檔案中，然后將 svg css 放入 css 檔案并在您的組件中匯入 css。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/415405.html
標籤：
下一篇：將單選按鈕的文本定位在其左側