如何将十六进制数传递给指令输入？答案

【问题标题】：How to pass hex number to directive input?如何将十六进制数传递给指令输入？
【发布时间】：2017-11-13 01:31:24
【问题描述】：

试图将十六进制的颜色值传递给指令，但无法理解为什么它无法识别它

在 html 中

<button md-button
        highlight 
[defBackColor]="#FFFFF7" [defColor]="#3498db
[background]="#2980b9" [foreground]="#FFFFF7"> {{filterType}}</button>

在指令中

import {Directive, HostBinding, HostListener, Input} from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {

  @Input() defBackColor: string = 'transparent';
  @Input() defColor: string = 'black';

  @Input('background') highlightBackColor: string = 'blue';
  @Input('foreground') higlightColor: string = 'white';

  @HostBinding('style.backgroundColor') backgroundColor: string = this.highlightBackColor;
  @HostBinding('style.color') textColor: string = this.higlightColor;

  constructor() { }
}

具有相同上下文的各种错误消息如下：未处理的 Promise 拒绝：模板解析错误：

解析器错误：在 [#FFFFF7] 中的第 1 列出现意外的标记 # ng:///AppModule/AppComponent.html@29:18 ("index" > ][defBackColor]="#FFFFF7" [defColor]="#3498db" [背景]="#2980b9" [前景]="#FFFFF7"

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

使用字符串 [defBackColor]="'#FFFFF7'"

【讨论】：