Почему мой элемент ввода не генерирует событие? - PullRequest
Новая
       19

Почему мой элемент ввода не генерирует событие?

0 голосов
/ 20 сентября 2019

У меня есть поле ввода, которое выбирает цвет.Цвет 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? :/
    }
  }

}

IСегодня весь день работали над дочерними генераторами событий, и единственное отличие состоит в том, что это элемент ввода, а не выпадающий список.Настройка аналогична другим компонентам и работает, но это не так.

У кого-нибудь есть идеи относительно того, почему это не работает?

1 Ответ

0 голосов
/ 20 сентября 2019

это добилось цели - собирать bin-nick-color-picker так, как будто он останавливает событие, но использование этого ... 

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

решило мою проблему.

Существует один запасной вариант Типы цветов не поддерживаются для IE , но так как мои клиенты работают с Mac, это должно быть хорошо.

...