Angular 2属性指令输入值未定义且未正确设置
Angular 2属性指令输入值未定义且未正确设置
提问于 2016-03-15 00:33:06
我有以下指令(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();
}
}当我在另一个组件中使用这个指令作为属性时，它没有设置元素的样式和颜色。即使您单击该按钮，也不会设置元素值。
如果我在指令中使用host (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();
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-15 00:37:03
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()，但我不明白为什么它不能工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35993030
复制相关文章
相似问题
腾讯云开发者
