Question

有一个模板：

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

收到错误：

未处理的承诺拒绝：模板解析错误：＆＃39;：svg：param＆＃39;是不是一个已知的元素：...

fullPath（） - 一个使用LocationStrategy服务检索活动网址的函数，它允许我使用＆lt; use＆gt;，但现在我已经被param ... ...

Answer 1

嗯，解决了，实际上它由两部分组成：

1） - Angular2中的错误。设置CUSTOM_ELEMENTS_SCHEMA没有帮助，至少仍然出现错误，但是用NO_ERRORS_SCHEMA替换它允许它通过。

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

2）不幸的是＆lt; param＆gt;不能在SVG中使用，至少在我想到的方式。我被Proposals for the SVG2.0迷惑了。所以我的版本中的SVG不起作用，但我能够使用工作游戏，使用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>

正如您所看到的，还需要使用DomSanatizer来设置样式。

但是再次给我带来了好运，xlink：href无法在CSS中设置））），但我会留下这篇文章，也许这会对某人有所帮助。

UPD：对于我的特定情况，我最终创建新组件而不是使用＆lt; def＆gt;

在Angular2中使用SVG <param />标记

1 个答案: