更改按钮值 Angular 7

Question

一道题：

<button (click)="activateMotion(1)">
    <img class="emotion-icon" id="positive-icon" src="" />
</button>
<button (click)="activateMotion(-1)">
    <img class="emotion-icon" id="negative-icon" src="" />
</button>

我有两个按钮，值是一张图片。我想写一个函数调用：activateMotion()。我想根据值 1 或 -1 更改按钮内的图像。我可以使用 jQuery 来实现这里的目标，但我在 Angular 中编写应用程序。

Answer 1

你的问题太宽泛了，因为你显然还没有尝试过任何东西，但它看起来像这样：

<button [innerHTML]="myComponentVariableName"></button>

然后，在您的函数中，您将有条件地渲染图像：

let myComponentVariableName = '';

if (something) {
    myComponentVariableName = '<img ... />';
} else {
    myComponentVariableName = '<img ... />';
}

您也可以将图像放在标记中，只更改源属性。

<button><img [src]="myComponentVariableName" /></button>

Answer 2

您还可以将 模板引用 引用到图像元素并将其传递到函数调用中，然后设置 src 属性：

<button (click)="activateMotion(1, img1)">
    <img #img1 class="emotion-icon" id="positive-icon" src="" />
</button>
<button (click)="activateMotion(-1, img2)">
    <img #img2 class="emotion-icon" id="negative-icon" src="" />
</button>

const src1 = '...';
const src2 = '...';

activateMotion(value: number, img: HTMLElement): void {
    if (value === 1) {
        img.setAttribute('src', src1);
    } else {
        img.setAttribute('src', src2)
    }
}

或者更简单，您通过图像上的输入绑定更改 src：

<img [src]="..." />

更改按钮值 Angular 7

Change button value Angular 7

javascript

jquery

angular

angular6

angular7