更改另一個div的背景顏色的div的點擊與angular2

Question

我頁面上的組件，它具有以下的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，我想獲得所選的顏色並作爲第二個div的背景顏色。

如何處理angular2？

Answer 1

您可以使用下面的代碼

<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> 

打字稿方法

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

LIVE DEMO