Angular 2 Attribut Direktive Eingabewerte sind nicht definiert und nicht richtig eingestellt

Question

Ich habe folgende Direktive (TextElementDirective), die 4 Eingabevariablen colorHex, fontFamily, fontWeight, fontStyle hat. Ich möchte mit dieser Anweisung die Farbe und den Stil eines Elements festlegen.

Wenn ich diese Direktive in einer anderen Komponente als Attribut verwende, werden nicht der Stil und die Farbe des Elements festgelegt. Auch wenn Sie auf die Schaltfläche klicken, werden die Elementwerte nicht festgelegt.

Wenn ich einen Host (onmousemove) in der Direktive verwende, funktioniert es gut. Aber ich möchte die Werte beim Start einstellen.

Irgendeine Idee, was vermisse ich?

Hier ist die Testkomponente, die es verwendet.

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


} 

Answer 1

Input() s sind im Konstruktor nicht zur Verfügung. Sie werden durch Änderungserkennung festgelegt, und die Änderungserkennung wird ausgeführt, nachdem die Komponente instanziiert wurde. Der Lifecycle-Haken ngOnChanges (jedes Update) und ngOnInit (einmal nach dem ersten ngOnChanges Anruf) nach Änderungserkennung genannt eine Eingabe aktualisiert:

ändern

constructor(private el: ElementRef){ 
    this.setElement(); 
} 

zu

constructor(private el: ElementRef); 

ngOnInit() { 
    this.setElement(); 
} 

ngOnInit() genannt wird nachdem die Eingänge initialisiert sind.

---

Statt

this.el.nativeElement.style.color = this.colorHex; 

es ist besser

@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; 

Eigentlich habe ich nicht versucht, das ich zu verwenden @HostBinding() und @Input() auf dem gleichen Feld hinzufügen, aber ich sehe nicht, warum würde es nicht funktionieren.