Question

如何在组件内部 Angular 4 中将类和路径动态添加到SVG中？

在我的组件中，当我将以下代码粘贴到组件模板中时，图标可以正常工作;

<svg class="another-class iconId">

<use xlink:href="/icon-path/def.svg#iconId"></use>

</svg>

但是当我尝试绑定这样的类时：

<svg class="another-class {{iconId}}">

<use xlink:href="/icon-path/def.svg#{{iconId}}"></use>

</svg>

我收到错误：

Error: Template parse errors:
Can't bind to ':xlink:href' since it isn't a known property of ':svg:use'

搜索后，我找到了将代码更改为此的建议：

<svg class="another-class {{iconId}}">

<svg:use [attr.xlink:href]="/icon-path/def.svg#{{iconId}}"></svg:use>

</svg>

由此我得到以下错误：

Uncaught (in promise): Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 30 in [/icon-path/def.svg#{{iconId}}]

我在这里做错了什么？

编辑：正如Noodle建议的那样尝试以下内容：

<svg class="another-class {{iconId}}">

<use [attr.xlink:href]="'/icon-path/def.svg#' + iconId"></use>

</svg>

仍然收到以下错误：

ERROR TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]'

当我从{{iconId}}移除<svg class="another-class {{iconId}}">时，该代码中没有错误，但svg图标也没有显示。

Answer 1

使用ngClass

[ngClass]="iconId"
[ngClass]="iconId ? iconId : ''"
[attr.xlink:href]="'/icon-path/def.svg#' + iconId"

在AppModule中导入它。我记得在Angular2中我找到了它但在Angular4中不知道。

import { CommonModule }       from '@angular/common';

Answer 2

这适用于Angular 6：

<svg [ngClass]="'another-class ' + iconId">
  <use [attr.xlink:href]="'/icon-path/def.svg#' + iconId"></use>
</svg>

Answer 3

试试这个：

<svg [class]="getIconClass(iconId)">
    <svg:use [attr.xlink:href]="getIconPath(iconId)"></svg:use>
</svg>

创建功能：

getIconPath(iconId) {
    return '/icon-path/def.svg#' + iconId;
}

getIconClass(iconId) {
    return 'another-class ' + iconId;
}

我修改了现有的plunker以显示上述功能用法

另请参阅此有用的post

Angular 4 - 添加课程＆amp;组件内svg的路径？

3 个答案: