Wartości wejściowe dyrektywy kątowej 2 są niezdefiniowane i niepoprawnie ustawione.

Question

Mam następującą dyrektywę (TextElementDirective), która ma 4 zmienne wejściowe colorHex, fontFamily, fontWeight, fontStyle. Chcę ustawić kolor i styl elementu za pomocą tej dyrektywy.

Kiedy używam tej dyrektywy w innym komponencie, jako atrybut, nie ustawia ona stylu i koloru elementu. Nawet jeśli klikniesz przycisk, wartości elementów nie zostaną ustawione.

Jeśli używam hosta (onmousemove) w dyrektywie, działa dobrze. Ale chcę ustawić wartości podczas uruchamiania.

Każdy pomysł, czego mi brakuje?

Oto komponent testowy, który z niego korzysta.

@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 nie są dostępne w konstruktorze. Są one ustawiane przez wykrywanie zmian, a wykrywanie zmian jest uruchamiane po utworzeniu komponentu. Haki cyklu życia ngOnChanges (każdy update) i ngOnInit (raz po pierwszym ngOnChanges nazwać) są nazywane po wykryciu zmian zaktualizowano dane wejściowe:

Zmień

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

do

constructor(private el: ElementRef); 

ngOnInit() { 
    this.setElement(); 
} 

ngOnInit() nazywa po zainicjowaniu wejść.

---

Zamiast

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

lepiej wykorzystywać

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

Właściwie nie próbowałem się, aby dodać @HostBinding() i @Input() na tym samym polu, ale nie widzę dlaczego to nie zadziała.