基本上，我有一個名為 的 html 文件，panel其中包含一個簡單的 DIV，我想將其插入到另一個主 HTML 文件中。我不想使用 Web 組件，而是想實現一個簡單的解決方案，如本答案中所述。因此，這就是我正在做的測試（只需將面板記錄到控制臺）：面板.html<div id="panel">
<h1>It works...</h1>
</div>獲取模板.tsexport async function getTemplate(filepath: string, selectors: string) { let response = await fetch(filepath); let txt = await response.text(); let html = new DOMParser().parseFromString(txt, 'text/html'); return html.querySelector(selectors);}主要.tsimport { getTemplate } from './get-template'getTemplate('/path/to/panel.html','#panel').then((panel) => {console.log(panel);})控制臺記錄“null”。如果此信息有任何影響，我將使用 Parcel-bundler 來構建應用程序。
1 回答
慕村9548890
TA貢獻1884條經驗 獲得超4個贊
實際問題是由@CBroe確定的，問題是在parcel構建我的應用程序時，我的資源的文件路徑panel.html更改為相對于構建的dist文件夾。
只是為了澄清：
在構建之前路徑是相對于
main.ts文件的構建后路徑是相對于
dist文件夾的
因此，解決方案是考慮最終的 URL?panel.html，并在使用 Parcel 構建之前提前參考它。
像這樣的事情在我的情況下會起作用：
main.ts（新）
import?{?getTemplate?}?from?'./get-template'
getTemplate('./panel.html','#panel').then((panel)?=>?{console.log(panel);})當然，另一步是將實際panel.hml文件復制到dist目錄中，否則 URL 將指向不存在的文件。
- 1 回答
- 0 關注
- 264 瀏覽
添加回答
舉報
0/150
提交
取消