web-dev-qa-db-ja.com

Angular 2つの属性ディレクティブ入力値が未定義であり、正しく設定されていない

4つの入力変数colorHex、fontFamily、fontWeight、fontStyleを持つ次のディレクティブ（TextElementDirective）があります。このディレクティブを使用して、要素の色とスタイルを設定します。

@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();
}


}
angulardirective
25
D M

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()を追加しようとはしていませんが、なぜ機能しないのかわかりません。

44
Günter Zöchbauer