Açısal 2 öznitelik yönerge değerleri undefined ve doğru ayarlanmamış

Question

Şu 4 yönergesi colorHex, fontFamily, fontWeight, fontStyle girdisi olan aşağıdaki yönergeye sahibim (TextElementDirective). Bu yönergeyi kullanarak bir elemanın rengini ve stilini ayarlamak istiyorum.

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

Bu yönergeyi, başka bir bileşende, öznitelik olarak kullandığımda, öğe stilini ve rengini ayarlamaz. Düğmeyi tıklatsanız bile, öğe değerleri ayarlanmamıştır.

Yönergede bir ana bilgisayar (onmousemove) kullanırsam, iyi çalışır. Ama başlangıç ​​sırasında değerleri ayarlamak istiyorum.

Neyin eksik olduğu hakkında bir fikrim var mı?

İşte bunu kullanan test bileşeni.

@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() lar yapıcı kullanılamaz. Değişiklik tespiti ile ayarlanırlar ve değişiklik algılandığında bileşen başlatılır.

constructor(private el: ElementRef); 

ngOnInit() { 
    this.setElement(); 
} 

ngOnInit() denir

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

için

Değişikliği: (bir kez ilk ngOnChanges çağrısından sonra) yaşam döngüsü kanca ngOnChanges (her güncellemesi) ve ngOnInit değişimi algılama güncellenen bir giriş sonra denir girişler başlatıldıktan sonra.

---

yerine

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

o Aslında aynı alanda @HostBinding() ve @Input() eklemek için kendimi denemedim

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

kullanmak daha iyidir, ama ben görmüyorum Neden işe yaramayacaktı?