Question

当我点击按钮显示颜色选择器如何将颜色代码从jquery传递到[style.backgroundColor]="color"

时，我使用farbtastic颜色选择器

HTML：

    <button ion-col full clear id="color-picker-handler" (click)="initiateColorPicker()">Pick Color</button>
  <ion-row class="selectedColor">
  <div class="selectedcolorCircle ion-col" [style.backgroundColor]="color" >
     </div>
     <div class="selectcolor ion-col">
     </div>
  </ion-row>

TS文件：

    initiateColorPicker() {
      jQuery('.selectcolor').farbtastic(function(color) {
        console.log(color)});
      console.log('Clicked');
  }

CSS：

.selectedColor {
  padding: 15px;
  width: 100%;
  min-height: 200px;
  text-align: center;

  .selectedcolorCircle {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    margin: 0 auto;

  }
}

Answer 1

这可能会对你有帮助，

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  (...)
})

export class MyComponent {
  constructor(private cdr:ChangeDetectorRef) {
  }


   initiateColorPicker() {
      jQuery('.selectcolor').farbtastic((color)=>{
        console.log(color)
        this.color=color;
        this.cdr.detectChanges();
      });

      console.log('Clicked');
  }
}

如何从angular2中的jQuery获取Style

1 个答案: