SVG Ionic角度和外部腳本

我的目標是檢索點擊svg。SVG Ionic角度和外部腳本

svg是與一些<rect />包含數據到app內導航，（app其被包裹在electron模塊）的文件。

於是，我找到了呼叫外部JavaScript一個很好的教程從svg通過這種方式

內svg

document.getElementById("svgroot").addEventListener("click", sendClickToParentDocument, false); 

    function sendClickToParentDocument(evt) 
    { 
     // SVGElementInstance objects aren't normal DOM nodes, so fetch the corresponding 'use' element instead 
     var target = evt.target; 
     if(target.correspondingUseElement) 
      target = target.correspondingUseElement; 

    // call a method in the parent document if it exists 
    if (window.parent.svgElementClicked) 
      window.parent.svgElementClicked(target); 
     else 
      alert("You clicked '" + target.id + "' which is a " + target.nodeName + " element"); 
    }

在index.html

function svgElementClicked(target) 
{ 
    var s = document.getElementById("status"); 
    s.textContent = "A <" + target.nodeName + 
    "> element with id '" + target.id + 
    "' was clicked inside the <" + 
    target.ownerDocument.defaultView.frameElement.nodeName.toLowerCase() + 
    "> element."; 
}

運作良好，但我和你在一起Ionic和electron，我需要檢索內的目標。

我試圖移動main.ts或任何.ts的外部功能，但我得到了警報（window.parent.svgElementClicked可能爲空）。

我試圖通過一個全局變量，但同樣的問題，變量永遠不會填寫app。

那麼，我該如何解決這個問題呢？

感謝您的幫助。

來源

2017-08-03 User.Anonymous

這段代碼不能使用角度。

，你必須編輯您的SVG rects如下：

在組件定義的onClick（）。 onClick將發出一個事件。這意味着要定義一個輸出事件發送器;

一些閱讀：https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

來源

2017-08-03 22:56:48 sancelot

你能更準確？我可以在沒有問題的情況下在svg內聯時注入（單擊），但是當svg作爲對象加載時，問題即將到來。然後所有的'角'東西都被打破了。謝謝。 –

你能更精確嗎？我可以在沒有問題的情況下在svg內聯時注入（單擊），但是當svg作爲對象加載時，問題即將到來。然後所有的'角'東西都被打破了。謝謝。 –

我的意思是你的svg文件必須是一個角度組件。直接訪問和使用dom，就像你做的那樣工作不好。在這種情況下，會出現不良行爲。 1 /創建mysvgcomponent 2 /將您的svg文件內容複製到mysvgcomponent.component.html中 3 /在應用程序/和組件中定義您的邏輯 – sancelot

SVG Ionic角度和外部腳本

回答

相關問題