我有以下指令(TextElementDirective),它有4个输入变量colorHex,fontFamily,fontWeight,fontStyle。我想使用此指令设置元素的颜色和样式。
@Directive( { selector: "[text-element-map]",// host: { // '(mousemove)': "onMouseMove()" // } } ) export class TextElementDirective{ @Input() colorHex : string; @Input() fontFamily : string; @Input() fontWeight : string; @Input() fontStyle : string; constructor(private el: ElementRef){ this.setElement(); } setElement(){ if(this.colorHex){ this.el.nativeElement.style.color = this.colorHex; } if(this.fontFamily){ this.el.nativeElement.style.fontFamily = this.fontFamily; } if(this.fontWeight){ this.el.nativeElement.style.fontWeight = this.fontWeight; } if(this.fontStyle){ this.el.nativeElement.style.fontStyle = this.fontStyle || ""; } } onMouseMove(){ this.setElement(); } }
当我在另一个组件中使用此指令时,作为属性,它不会设置元素样式和颜色。即使单击该按钮,也不会设置元素值。
如果我在指令中使用主机(onmousemove),它可以正常工作。但我想在启动时设置值。
知道我错过了什么吗?
这是使用它的测试组件。
@Component({ template: ` <h3>Test</h3> <div> <span>text-element-map: </span> <span class="text-content" text-element-map [colorHex]="colorHex" [fontFamily]="fontFamily" [fontWeight]="fontWeight" [fontStyle]="fontStyle">Change this text</span> <button (click)="setCurrentDesignElement()">Click</button> </div> `,directives:[TextElementDirective],changeDetection: ChangeDetectionStrategy.Default }) export class TestComponent{ @ViewChild(TextElementDirective) private childTextElement: TextElementDirective; colorHex: string = "#e2e2e2"; fontFamily: string = "Arial"; fontWeight: string = "normal"; fontStyle: string = "normal"; setCurrentDesignElement(){ this.color = { hex: "#B4B4B4",id: 5745,name: "Athletic Heather" }; this.font = { cssString: "Valera Round",weight: "normal",style: "italic" }; this.colorHex = "#B4B4B4"; this.fontFamily = "Valera Round"; this.fontWeight = "normal"; this.fontStyle = "italic"; //this.childTextElement.setElement(); } }
Input()s在构造函数中不可用。它们由更改检测设置,并在组件实例化后运行更改检测。在更改检测更新输入后调用生命周期挂钩ngOnChanges(每次更新)和ngOnInit(在第一次ngOnChanges调用之后)
更改
constructor(private el: ElementRef){ this.setElement(); }
至
constructor(private el: ElementRef) {}; ngOnInit() { this.setElement(); }
初始化输入后调用ngOnInit()。
代替
this.el.nativeElement.style.color = this.colorHex;
最好使用
@HostBinding('style.color') @Input() colorHex : string; @HostBinding('style.font-family') @Input() fontFamily : string; @HostBinding('style.font-weight') @Input() fontWeight : string; @HostBinding('style.font-style') @Input() fontStyle : string;
实际上我没有尝试在同一个字段上添加@HostBinding()和@Input(),但我不明白为什么它不起作用。