Angular 角度4-添加一个类&；组件内部svg的路径？

当SVG位于组件内部时，如何在Angular 4中将类和路径动态添加到SVG

在我的组件中，当我将以下代码粘贴到组件模板中时，图标起作用

<svg class="another-class iconId">

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

</svg>

在四处搜索后，我找到了将代码更改为以下内容的建议：

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

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

</svg>

我做错了什么

编辑：根据面条建议尝试了以下操作：

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

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

</svg>

当我从

中删除

{{iconId}}

时，代码中没有错误，但是svg图标也没有显示。

使用ngClass

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

在AppModule中导入此文件。我记得它在Angular2中为我固定，但在Angular4中不知道

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

使用ngClass

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

在AppModule中导入此文件。我记得它在Angular2中为我固定，但在Angular4中不知道

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

试试这个：

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

我已经修改了一个现有的函数来显示上面的函数用法

另外，请查看这一有用信息，尝试以下方法：

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

我已经修改了一个现有的函数来显示上面的函数用法

---

另请查看此有用的

这适用于Angular 6：

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

---

这适用于角度6：

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

[attr.xlink:href]=“icon path/def.svg#”+iconId”

使用绑定时无需添加

{}

。@n00dl3 Hi。试过了。还是有错误。我用结果更新了我的答案。看来你忘了大括号。对于类，只需使用ngClass即可：

[ngClass]=“iconId”

。抱歉。大括号在我的代码中。我忘了把它们加在这里了。添加ngClass会引发一个错误：无法绑定到“ngClass”，因为它不是的一个已知属性：svg:svg'

[attr.xlink:href]=“/icon path/def.svg#'+iconId”

使用绑定时无需添加

{}

。@n00dl3 Hi。试过了。还是有错误。我用结果更新了我的答案。看来你忘了大括号。对于类，只需使用ngClass即可：

[ngClass]=“iconId”

。抱歉。大括号在我的代码中。我忘了把它们加在这里了。添加ngClass会引发错误：无法绑定到“ngClass”，因为它不是“：svg:svg”Hi的已知属性。执行此操作时，我遇到以下错误：无法绑定到“ngClass”，因为它不是“：svg:svg”的已知属性。您好，否。要使其正常工作，我必须这样更改它：[ngClass]=“iconName？iconName:”。否则会出现一个错误，说我缺少一个冒号。在那之后，我仍然得到错误：无法绑定到“ngClass”，因为它不是的一个已知属性：：svg:svg“我曾经遇到过同样的问题，不记得我是如何修复它的。我找到修复后会回来的。谢谢！！我一整天都在努力解决这个问题：（检查从“@angular/common”导入的{CommonModule}；您好。当我这样做时，我得到了以下错误：无法绑定到“ngClass”，因为它不是：svg:svg.的一个已知属性。您好，不。为了让它工作，我必须这样更改它：[ngClass]=“iconName？iconName:”“”。否则，会出现一个错误，说我缺少冒号。之后，我仍然会收到错误：无法绑定到“ngClass”，因为它不是的一个已知属性：：svg:svg“我有时会遇到相同的问题，不记得我是如何修复的。我会在找到修复后返回。谢谢！！我整天都在努力解决这个问题：（检查导入{CommonModule}从“@angular/common”尝试。没有错误，但图标也不显示。尝试了。没有错误，但图标也不显示。

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