在angular2上单击div来更改另一个div的背景颜色 [英] Change another div's background color on click of div with angular2

问题描述

我在页面上有一个组件，它包含以下div：

 < div style =width：400; height： 400; float：left> 
< div style =background-color：red; width：50％; height：50％; float：left> 
< / div> 
< div style =background-color：blue; width：50％; height：50％; float：right> 
< / div> 
< div style =background-color：green; width：50％; height：50％; float：left> 
< / div> 
< div style =background-color：orange; width：50％; height：50％; float：right> 
< / div> 
< / div> 
  

我在同一页面有另一个div

 < div class =eventBox eventBox__colorBar>< / div> 
  

当我点击上面的任何一个div时，我想获得选定的颜色并作为第二格的背景颜色。

如何处理angular2？

解决方案

您可以使用以下代码

 < div> 
< div style =background-color：red; width：50％; height：50％; （点击）= readColor（$事件） > XYZ< / DIV> 
< div style =background-color：blue; width：50％; height：50％; float：right（click）=readColor（$ event）>蓝色< / div> 
< div style =background-color：green; width：50％; height：50％; float：left（click）=readColor（$ event）> green< / div> 
< div style =background-color：orange; width：50％; height：50％; float：right（click）=readColor（$ event）> black< / div>< / DIV>< / DIV> 
 
< div [style.background-color] =color>一些文字在这里< / div> 
< / div> 
  

打字稿方法

  readColor（value）{
 this.color = value.srcElement.style ['background-color']; 
 console.log（value.srcElement.style ['background-color']）; 
} 
  

LIVE DEMO

I have a component on the page which has following divs

<div style=" width:400; height:400; float:left">
 <div style="background-color:red; width:50%; height:50%; float:left">
 </div>
 <div style="background-color:blue; width:50%; height:50%; float:right">
 </div>
 <div style="background-color:green; width:50%; height:50%; float:left">
 </div>
 <div style="background-color:orange; width:50%; height:50%; float:right">
 </div>
 </div>

I have another div on the same page as

<div class="eventBox eventBox__colorBar"></div>

When i click on any of the div above, i want to get the selected color and apply as a background-color for the 2nd div.

How to do with angular2?

解决方案

You can use the below code

<div>      
    <div style="background-color:red; width:50%; height:50%;" (click)="readColor($event)"> XYZ</div>
    <div style="background-color:blue; width:50%; height:50%; float:right" (click)="readColor($event)">blue</div>
    <div style="background-color:green; width:50%; height:50%; float:left" (click)="readColor($event)">green</div>
    <div style="background-color:orange; width:50%; height:50%; float:right" (click)="readColor($event)">black</div></div></div>

    <div  [style.background-color]="color">some text here</div>
</div>

Typescript method

 readColor(value){
    this.color=value.srcElement.style['background-color'];
    console.log(value.srcElement.style['background-color']);
  }

LIVE DEMO

这篇关于在angular2上单击div来更改另一个div的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！