如何使用 hostlistener 和 hostbinding 更改边框的颜色？答案

【问题标题】：how to change the color of the border using hostlistener and hostbinding?如何使用 hostlistener 和 hostbinding 更改边框的颜色？
【发布时间】：2020-07-01 07:22:19
【问题描述】：

我有 3 个 div 标签，在其中一个上，我分配了点击事件。我的要求是当我点击 div 元素时，背景颜色和边框必须变为红色。

现在当我点击 div 标签时，边框颜色正在改变，但不是 div 元素而是在同一页面上定义的 input 元素。如何解决？我的代码：

image.html

<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<img  id="blah" [src]="url" alt="your image" cdkDrag/>



<div class="box1" (click)="changeColor()" >
    hi
</div>

<div class="box2" >
    hi
</div>
<div class="box3" >
    hi
</div>

和 image.ts

@HostBinding('style.border') border: string;
  @HostListener('click')resetColor(){
    this.border=' 5px solid red'
  }

【问题讨论】：

你能在stackblitz.com上提供演示代码吗？那么这将是一个快速的解决方案
由于我的一些技术问题，我无法这样做。你能帮忙
我认为您需要整个页面边框为红色，背景也为红色。我的理解正确吗？
我只需要红色用于放置图像的 div 标签
您可以使用 ngStyle 来满足您的要求。并且您需要在 div 标签中设置图像。

标签： angular

【解决方案1】：

在 html 中：

<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<div [ngStyle]="{ 'border' : (isclicked == true) ? '5px solid red' : 'none' }"
>
  <img  id="blah" [src]="'https://pluralsight2.imgix.net/paths/images/angular-14a0f6532f.png'" alt="your image" cdkDrag/>
  </div>

<div class="box1" (click)="changeColor()" >
    hi
</div>

<div class="box2" >
    hi
</div>
<div class="box3" >
    hi
</div>

在ts中：

export class AppComponent {
  name = "Angular 4";
  isclicked = false;
  changeColor() {
    this.isclicked = !this.isclicked;
    console.log(this.isclicked);
  }
}

你期待这种行为吗？

【讨论】：