SVG在子組件模板

Question

AngularJS 1.X具有通過指令返回的對象上templateNamespace財產。這個可以設置爲svg。 但我不能找到一種方法來設置AngularJS 2

模板命名空間當我嘗試這樣那樣的代碼，沒有被渲染（plunker）：

@Component({ 
    selector : "my-app", 
    template : ` 
     <svg width="100" height="100"> 
     <circle> </circle> 
     </svg> 
    `, 
    directives : [CircleComponent] 
}) 
export class MyAppComponent { } 

@Component({ 
    selector : "circle", 
    template : ` 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"> </circle> 
    ` 
}) 
export class CircleComponent { } 

我們可以看到圓svg標籤位於圓圈組件標籤名稱內。可能是它無法工作的原因。由於replace : true不能再使用，它​​也不是一個解決方案。

旁註：
寫一個這樣的自閉標記的圓圈會產生錯誤。
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>

Answer 1

要回答你的問題有關的命名空間，命名空間前綴添加到元素標記：

template: `<svg:circle ...></svg:circle>` 

...然後Angular2將使用該命名空間爲元素及其子元素模板。並指出，雖然你可以爲SVG元素標籤本身做同樣的：

template: `<svg:svg ...></svg:svg>` 

...這是沒有必要在這種情況下，通常沒有這樣做。

現在，請注意這第二個問題：您正在使用「圓」作爲一個選擇，從

<circle></circle> 

擴展到

<circle> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle> 
</circle> 

這不是有效的SVG，也不會呈現。 （它也像它會遞歸，幸好角度似乎並沒有做到這一點。）

相反，使用屬性選擇一些新的名字：

selector: "[my-circle]" 

和像這樣的模板：

template: `<g my-circle></g>`