[HTML选择选项的双向绑定Angular2 +

Question

我正在我的应用程序中制作一项功能，该功能会更改Angular中工具栏的颜色。

为此，我创建了一个带有颜色字符串参数的指令。

当我对所需的值进行硬编码时，该指令可以正常工作，

现在，我想使用选择选项将值动态分配给指令。

我目前正在通过click事件这样做。我的方法是从选项中收集值并将其分配给我的toolBarColor变量的值。

我已经通过检查检查了，发现我的方法成功收集了值并将其分配给与我的指令连接的变量。]​​>

我也尝试过[ngValue]和ngModel路由，但还没有成功。

下面是我的代码。

<select class="form-control" (click)="colorSelect(colorChosen)" [(ngModel)]="toolbarColor">
  <option *ngFor="let color of themeColors" value="{{color}}">{{color}}</option>
</select>
我的组件包含此方法

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}}>

我正在我的应用程序中制作一项功能，该功能会更改Angular工具栏的颜色。为此，我创建了一个带有颜色字符串参数的指令。当我硬编码...

Answer 1

当指令的输入发生更改时，您不会更新背景。有两种可能的解决方案。