При подключении HTML выберите опции с двухсторонней привязкой Angular2 + - PullRequest
Новая
       22

При подключении HTML выберите опции с двухсторонней привязкой Angular2 +

0 голосов
/ 16 апреля 2020

Я делаю функцию в своем приложении, которая меняет цвет моей панели инструментов на Angular.

Для этого я создал директиву, имеющую параметр строки цвета.

Директива отлично работает, когда я жестко кодирую нужное значение,

Теперь я хочу использовать опцию выбора для динамического присвоения значения директиве.

Я делаю так что в настоящее время через событие клика. Мой метод собирает мое значение из опции и присваивает его значению моей переменной toolBarColor.

Я проверил проверку и увидел, что мой метод успешно собирает значение и присваивает его переменной, которая связана к моей директиве.

Я также пробовал с маршрутом [ngValue] и ngModel, но пока не увенчался успехом.

Ниже приведен мой код. 

<select class="form-control" (click)="colorSelect(colorChosen)" [(ngModel)]="toolbarColor">
  <option *ngFor="let color of themeColors" value="{{color}}">{{color}}</option>
</select>

my Компонент содержит этот метод 

colorSelect(color: string){
    this.toolbarColor = color;
  }

Панель инструментов - это просто пустая строковая переменная.

Код директивы как таковой. 

import { Directive, AfterViewInit, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[myColorPicker]'
})
export class ColorPickerDirective implements AfterViewInit {

  @Input() myColorPicker: string;

  constructor(private elRef: ElementRef) { 
  }

 ngAfterViewInit(): void {
 this.elRef.nativeElement.style.background = this.myColorPicker;
  }

}

это реализация директивы в моя панель инструментов 

<div class="toolbar" role="banner" myColorPicker={{toolbarColor}}>

1 Ответ

1 голос
/ 16 апреля 2020

Вы не обновляете фон, когда изменяется ввод в вашу директиву. Есть два возможных решения.

1. Используйте сеттер с такой переменной поддержки: 

import { Directive, AfterViewInit, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[myColorPicker]'
})
export class ColorPickerDirective implements AfterViewInit {

  @Input()
  set myColorPicker(val: string) {
      this._myColorPicker = val;
      updateBackground();
  }
  _myColorPicker!: string;

  constructor(private elRef: ElementRef) { 
  }

  ngAfterViewInit(): void {
     updateBackground();
  }

  updateBackground() {
     this.elRef.nativeElement.style.background = this._myColorPicker;
  }
}

2. используйте событие ngOnChanges так: 

import { Directive, AfterViewInit, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[myColorPicker]'
})
export class ColorPickerDirective implements AfterViewInit, OnChanges {

  @Input() myColorPicker: string;

  constructor(private elRef: ElementRef) { 
  }

  ngAfterViewInit(): void {
     updateBackground();
  }

  ngOnChanges(changes: SimpleChanges) {
     updateBakground(); // I am not sure if myColorPicker contains the new value at this point. If not you need to read the new value from the changes object
  }

  updateBackground() {
     this.elRef.nativeElement.style.background = this.myColorPicker;
  }
}
...