在Angular2

Question

使用SVG 標籤有一個模板：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <defs> 
      <g id="tpl1"> 
       <image xmlns:xlink="http://www.w3.org/1999/xlink" 
         [attr.xlink:href]="param(url)" 
         [attr.x]="-18" [attr.y]="-30"></image> 
      </g> 
     </defs> 
     <svg:use [attr.x]="25" [attr.y]="25" 
       [attr.xlink:href]="fullPath()+'#tpl1'"> 
       <param name="url" value="/img.png" /> 
     </svg:use> 
</svg> 

收到錯誤：

Unhandled Promise rejection: Template parse errors: ':svg:param' is not a known element: ...

FULLPATH（） - 「檢索使用LocationStrategy服務活動的網址SA功能，它允許我使用<使用>，但現在我被帕拉姆stucked ...

Answer 1

嗯，解決，其實它是由2部分組成：

1） - Angular2錯誤。 設置CUSTOM_ELEMENTS_SCHEMA沒有幫助，至少仍然出現錯誤，但用NO_ERRORS_SCHEMA替換它允許它通過。

@NgModule({ 
    imports: [/***/], 
    declarations: [/***/], 
    exports: [/***/], 
    schemas: [NO_ERRORS_SCHEMA] 
}) 

2）不幸的是，< param>不能在SVG中使用，至少在我想到的方式中。我被Proposals for the SVG2.0迷惑了。所以SVG在我的版本將無法正常工作，但我可以用workaraund，使用CSS瓦爾：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <defs> 
      <g id="tpl1"> 
       <circle xmlns:xlink="http://www.w3.org/1999/xlink" 
         [attr.style]="_sanatizer.bypassSecurityTrustStyle('r:var(--radius)')" 
         [attr.cx]="-18" [attr.cy]="-30"></circle> 
      </g> 
     </defs> 
     <svg:use [attr.x]="25" [attr.y]="25" 
       [attr.xlink:href]="fullPath()+'#tpl1'" 
       [attr.style]="_sanatizer.bypassSecurityTrustStyle('--radius:10')" 
     ></svg:use> 
</svg> 

正如你可以看到它也需要使用DomSanatizer，設置樣式。

但是我再次運氣不好，xlink：href無法在CSS中設置））），但我會離開這篇文章，也許這對別人會有幫助。

UPD： 對於我的特殊情況，我最終創建了新組件而不是使用< def>