如何动态更改 clr-icon 自定义元素的形状？答案

【问题标题】：How can I dynamically change the shape of a clr-icon custom element?如何动态更改 clr-icon 自定义元素的形状？
【发布时间】：2017-10-24 15:18:40
【问题描述】：

在Clarity Icon docs 中，他们表明您可以使用 shape 属性来设置图标形状，如下所示：

<clr-icon shape="info-circle" size="16"></clr-icon>

在我的角度模板中，我使用了这样的 clr-icon 元素：

<clr-icon [shape]="myShape"></clr-icon>

并使用我的组件设置绑定到myShape的形状的字符串值：

export class MyComponent {
    public myShape = 'volume-up';

    changeShape() {
        if(this.myShape === 'volume-up') {
            this.myShape = 'volume-mute';
            return;
        }
        this.myShape = 'volume-up;
    }
}

使用按钮（未在模板中显示）我想运行changeShape() 来动态更改图标的形状，但什么也没发生，我错过了什么？

【问题讨论】：

标签： angular custom-element vmware-clarity

【解决方案1】：

请参阅 Angular 模板语法绑定目标部分。链接：https://angular.io/guide/template-syntax#binding-targets

你需要使用：

[attr.shape]="myShape"

演示：https://plnkr.co/edit/m4v5hXMxWRL5ObD3TPaO?p=preview

【讨论】：