如何在 Angular JS 中用另一个 svg 图标动态替换 svg 图标？

Posted 2023-03-28

【中文标题】如何在 Angular JS 中用另一个 svg 图标动态替换 svg 图标？

【英文标题】：How to dynamically replace svg icon with another svg icon in angular JS?

【发布时间】：2021-07-08 11:50:11

【问题描述】：

我正在使用专用框架，其中调用 svg 图标的唯一可能性是通过放置图标的路径，即：

<sit-command-bar sit-type="action" sit-layout="vertical">
    <sit-command 
       svg-icon="common/icons/cmdStop24.svg"
       sit-name="customcommand.stop"
       sit-tooltip=vm.btnBlockText
       ng-click="vm.blockButtonHandler"
       sit-label=vm.btnBlockText
       ng-show="vm.isButtonVisible"></sit-command>
</sit-command-bar>

如果有可能用另一个图标动态替换图标，我很高兴。 我试图引用一个变量并从角度改变它的路径，但即使路径改变了，图标也不会被替换。

svg-icon=vm.blockIconPath

if (item.BlockNewWorkOrder == true) 
   self.blockIconPath = "common/icons/cmdSubmit24.svg"; 
else 
   self.blockIconPath = "common/icons/cmdStop24.svg";

是不是因为svg图标是在页面生命周期开始时加载的？

来自框架文档中心的其他上下文：

name	type	description
svg-icon	string	SVG icon to be displayed for the command button.
cmd-icon	string	Command svg icon to be displayed for the command button. This is used only if the svg-icon is not provided.
sit-icon	string	One or more CSS classes corresponding to the icon to display for the command button. This is used only if both svg-icon and cmd-icon are not specified. (default: fa-cogs)

【问题讨论】：

你能创建一个演示它的演示吗？

【参考方案1】：

如果您只有 2 个条件，那么您可以像这样简单地使用 ng-if：

<sit-command-bar sit-type="action" sit-layout="vertical">
    <sit-command 
       ng-if="vm.BlockNewWorkOrder"
       svg-icon="common/icons/cmdSubmit24.svg"
       sit-name="customcommand.stop"
       sit-tooltip=vm.btnBlockText
       ng-click="vm.blockButtonHandler"
       sit-label=vm.btnBlockText
       ng-show="vm.isButtonVisible"></sit-command>
    <sit-command 
       ng-if="!vm.BlockNewWorkOrder"
       svg-icon="common/icons/cmdStop24.svg"
       sit-name="customcommand.stop"
       sit-tooltip=vm.btnBlockText
       ng-click="vm.blockButtonHandler"
       sit-label=vm.btnBlockText
       ng-show="vm.isButtonVisible"></sit-command>
</sit-command-bar>

【参考方案2】：

由于唯一的可变项是图标源，这会更简洁：

<sit-command-bar sit-type="action" sit-layout="vertical">
    <sit-command 
       svg-icon="common/icons/ vm.BlockNewWorkOrder ? 'cmdSubmit24.svg' : 'cmdStop24.svg'"
       sit-name="customcommand.stop"
       sit-tooltip=vm.btnBlockText
       ng-click="vm.blockButtonHandler"
       sit-label=vm.btnBlockText
       ng-show="vm.isButtonVisible"></sit-command>
</sit-command-bar>