Verwendung SVG <param> Tag in Angular2

Question

Haben Sie eine Vorlage:

<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> 

immer Fehler:

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

fullPath() - ‚sa-Funktion, die aktive URL abruft mit LocationStrategy Service, es mir erlaubt, zu verwenden, < verwenden Sie >, aber jetzt bin ich mit param ...

Answer 1

fest, gelöst, eigentlich besteht es aus 2 Teilen:

1) - Fehler in Angular2. Einstellung CUSTOM_ELEMENTS_SCHEMA war nicht hilfreich, zumindest Fehler erschien noch, aber durch Ersetzen von ihm mit der NO_ERRORS_SCHEMA erlaubte es zu bestehen.

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

2) Leider < param> kann nicht in SVG, zumindest in der Art, wie ich gedacht verwendet werden. Ich wurde von der Proposals for the SVG2.0 getäuscht. So SVG in meiner Version wird nicht funktionieren, aber ich war in der Lage workaraund zu verwenden, CSS Vars:

<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> 

Wie Sie sehen können sie auch DomSanatizer zu verwenden, erforderlich, um Stile gesetzt.

Aber Pech für mich wieder, xlink: href kann nicht in CSS gesetzt werden))), aber ich werde diesen Beitrag verlassen, vielleicht wird es für jemanden hilfreich sein.

UPD: für meinen speziellen Fall, dass ich neue Komponente am Ende zu schaffen statt mit < def>