两种方法在一种方法中实现 - 角度

Question

因为我有两种方法，所以我想把它变成一种方法。

例如

我有两种颜色，一种用于背景颜色变化，另一种用于形状颜色。

我在想的是不是背景颜色，而是我希望形状颜色同时适用于背景和形状。

这是我的 TS 代码

setCanvasFill(): void {
    if (!this.props.canvasImage) {
        this.canvas.backgroundColor = this.props.canvasFill;
        this.canvas.renderAll();
    }
}

setFillColor(swatch: any): void {
    this.palettes.selected = swatch;
    this.props.fill = swatch.key;
    this.setFill();
}

这是我的背景色 HTML

    <div class="custom-item" *ngIf="!props.canvasImage">
  <div class="custom-item-title">Background color</div>
  <div class="custom-item-body">
    <input type="text" class="form-control" [cpPosition]="'left'" [cpPresetColors]="customColors" [cpOKButton]="true" [cpAddColorButtonText]="'Speichern'" [cpAddColorButton]="true" [cpOKButtonClass]="'btn btn-light btn-sm'" [cpSaveClickOutside]="false" [(colorPicker)]="props.canvasFill"
           [style.background]="props.canvasFill" [value]="props.canvasFill" (cpPresetColorsChange)="updateColorPresets($event)"
           (colorPickerChange)="setCanvasFill()"/>
  </div>
</div>

这是我的形状颜色的 html

    <div class="panel panel-default panel-palettes no-select">
  <div class="panel-heading">Color palette</div>
  <div class="panel-body max-height">
    <ul class="list-inline">
      <li class="color-swatch" *ngFor="let p of palettes.defaults" title="{{p.value}}" (click)="setFillColor(p)"
          [ngStyle]="{'background-color': p.key}" [ngClass]="{'selected': palettes.selected === p}">
        &nbsp;</li>
    </ul>
    <ul class="color-swatch-custom list-inline">
      <li class="color-swatch" *ngFor="let p of palettes.custom" title="{{p.value}}" (click)="setFillColor(p)"
          [ngStyle]="{'background-color': p.key}" [ngClass]="{'selected': palettes.selected === p}">&nbsp;</li>
    </ul>
  </div>
  <div class="panel-footer">
    <div class="btn-group btn-group-sm pull-right" role="group" aria-label="
    Color palette actions"
         [ngClass]="{'btn-group-disabled': palettes.selected === null}">
      <button ngbTooltip="Clear color" title="Clear color" type="button"
              class="btn btn-default" [disabled]="palettes.selected === null || palettes.selected.type !== undefined"
              (click)="removeSelectedColorSwatch();"><i
          class="fa fa-trash text-danger"
          aria-hidden="true"></i>
      </button>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
<!-- /Panel: Color Palettes -->

我正在尝试这样

    setFillColor(swatch: any): void {
    this.palettes.selected = swatch;
    this.props.fill = swatch.key;
    this.setFill();
    this.setCanvasFill();
    
}

setCanvasFill(): void {
    if (!this.props.canvasImage) {
        console.log('say hi')
        this.canvas.backgroundColor = this.props.canvasFill;
        this.canvas.renderAll(); 
    }
}

我正在获取日志，但颜色不适用

Answer 1

这是你想要的吗？

setFillColor(swatch: any): void {
    this.palettes.selected = swatch;
    this.props.fill = swatch.key;
    this.setFill();
    if (!this.props.canvasImage) {
        console.log('say hi')
        this.canvas.backgroundColor = this.props.canvasFill;
        this.canvas.renderAll(); 
    };
}