使用 angular2 单击 div 更改另一个 div 的背景颜色答案

【问题标题】：Change another div's background color on click of div with angular2使用 angular2 单击 div 更改另一个 div 的背景颜色
【发布时间】：2017-02-24 02:26:20
【问题描述】：

我在页面上有一个包含以下 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怎么办？

【问题讨论】：

标签： html angular typescript

【解决方案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

【讨论】：

@Sajeetharan 欢迎。兄弟。很高兴能帮助你大师杰。 :)