Question

我有一个选择颜色的输入字段。颜色“ selectedColor”应该向父级发出，但是即使注销子级也不会呈现任何颜色。我已经剥离了拾色器，而且似乎也没有任何改变。

.parent

<app-settings-color-item (newColor)="getColorValue($event)" [setting]="config.background_color"></app-settings-color-item>

parent-component.ts

public getColorValue(selectedColor: Colors) {
  if (selectedColor) {
    this.selectedColor = selectedColor;
  }
}

.child

<ng-container *ngIf="setting">
    <li>
        <input 
        [value]="setting.data.hex_code" 
        [cpPosition]="'center'"
        [ngModel]="selectedColor" 
        [style.background]="setting.data.hex_code"
        [(colorPicker)]="setting.data.hex_code" 
        [cpOKButton]="true"
        (colorPickerChange)="selectedColor" 
        [cpOKButton]="true" 
        [cpSaveClickOutside]="false"
        [cpOKButtonClass]="'update'"
        (change)="selectColor(selectedColor)">
    </li>
</ng-container>

.child-component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Config } from 'src/app/config';
import { Colors } from '../colors';

@Component({
  selector: 'app-settings-color-item',
  templateUrl: './settings-color-item.component.html',
  styleUrls: ['../settings.component.scss','./settings-color-item.component.scss']
})
export class SettingsColorItemComponent implements OnInit {

  @Input()
  setting: Config;

  @Output()
  private newColor = new EventEmitter<Colors>();

  selectedColor: Colors;

  constructor() { }

  ngOnInit() {
  }

  public selectColor(){
    if(this.selectedColor){
      const selectedColor = this.selectedColor;
      this.newColor.emit(selectedColor);
      console.log(selectedColor);//doesn't log anything? :/
    }
  }

}

我整天都在研究子事件发射器，唯一的区别是这是输入元素，而不是选择下拉列表。设置在其他组件中是相同的，并且可以使用，但是不一样。

有人对这为什么不起作用有任何想法吗？

Answer 1

这可以解决问题-将ngx-color-picker装箱，因为它看起来像停止了事件的发出，但是使用了它...

<ng-container *ngIf="setting">
    <li>
        <input 
        type="color"
        value="selectedColor"
        [(ngModel)]="selectedColor" 
        (change)="selectColor(selectedColor)">
    </li>
</ng-container>

解决了我的问题。

有一个回退color types aren't supported for IE，但是当我的客户在Mac上工作时，应该没事。

为什么我的输入元素没有发出事件？

1 个答案: