我的問題是這樣的，我正在嘗試將 svg.js 庫實作為一個角度組件，我的想法是我可以將它注入到組件內的一個 div 中，以便我可以輕松地操作它。
因此，為了解釋我在組件中的問題（是 app-component 的子組件），我在組件的 html 部分中有這個 div 元素，想法是在里面注入 svg 元素。
<div class="svgRenderer" #svgRenderer *ngIf="renderSvgElement" id="svgRenderer" name="svgRenderer"></div>
然后在 component.ts 我有從服務中的 observable 訂閱的方法，它只執行這個方法。
createContainerSVG() {
this.renderSvgElement = true;
this.svgCanvas = svg.SVG().addTo('#svgRenderer').size(200, 100); //error is located in the addTo
this.svgCanvas.rect(100, 100).move(100, 50).fill('#f06');
}
所以問題是 addTo 應該接收一個 CSS 選擇器，但即使這樣也只會向我拋出類似“ERROR TypeError: Cannot read properties of null (reading 'put')”之類的錯誤。
我嘗試的是創建一個指向 id=svgRenderer 的 viewChild，然后使用“nativeElement”為我帶來 div 的參考，從而導致“錯誤型別錯誤：無法讀取未定義的屬性（讀取 'nativeElement'）”。
現在正在作業但不是我想要的是將svgCanvas添加到正文中，這個想法是隱藏在組件中創建的svg然后我將svg元素匯出到pdf，然后以編程方式洗掉svg組件.
我忘記了如何在角度上呼叫元素嗎？我的做法有問題嗎？我不得不承認我對 Angular 還是很陌生。
此外，我也接受與 angular 作為答案但不是 ngx-svg 的替代方案，我需要將最終的 svg 匯出為 pdf，因此它必須通過 typescript 隱藏和創建，而不是像 ngx-svg 那樣在 html 上.
uj5u.com熱心網友回復：
最后我解決了我自己的問題，如果你在我的問題中看到我有這個值this.renderSvgElement = true;，它應該讓面板出現，如果它的值是真的，但它沒有被 viewChild 識別，即使它是渲染，所以我檢查了該元素，viewChild 識別了該元素，我可以使用它this.svgCanvas = svg.SVG().addTo(this.svgRenderer.nativeElement).size(200, 100);來將我的 svg 畫布附加到元素上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/430530.html