Angular 2属性指令输入值未定义且未正确设置

发布时间：2020-12-17 08:02:09 所属栏目：安全来源：网络整理

导读：我有以下指令(TextElementDirective)，它有4个输入变量colorHex，fontFamily，fontWeight，fontStyle。我想使用此指令设置元素的颜色和样式。 @Directive({ selector: "[text-element-map]",// host: { // '(mousemove)': "onMouseMove()" // }})export clas

我有以下指令(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()，但我不明白为什么它不起作用。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!