如何动态更改clr-icon自定义元素的形状? [英] How can I dynamically change the shape of a clr-icon custom element?

问题描述

在清晰度图标文档中，它们表明您可以使用shape属性，用于设置图标形状，如下所示:

In the Clarity Icon docs they show that you can use the shape attribute to set the icons shape like this:

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

在我的角度模板中，我使用的是clr-icon元素，如下所示:

In my angular template I am using a clr-icon element like this:

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

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

And use my component to set the string value of the shape bound to myShape:

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

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

使用按钮(模板中未显示)，我想运行changeShape()以动态更改图标的形状，但是什么也没有发生，我想念的是什么?

Using a button (not shown in the template) I want to run the changeShape() to dynamically change the shape of the icon but nothing is happening, what am I missing?

推荐答案

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

Please refer to Angular Template Syntax Binding targets section. Link: https://angular.io/guide/template-syntax#binding-targets

您需要使用:

[attr.shape]="myShape"

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

这篇关于如何动态更改clr-icon自定义元素的形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！