web-dev-qa-db-fra.com

Angular 2 ne sont pas définies et ne sont pas définies correctement

J'ai la directive suivante (TextElementDirective), qui a 4 variables d'entrée colorHex, fontFamily, fontWeight, fontStyle. Je veux définir la couleur et le style d'un élément à l'aide de cette directive.

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

Lorsque j'utilise cette directive dans un autre composant, en tant qu'attribut, elle ne définit pas le style et la couleur de l'élément. Même si vous cliquez sur le bouton, les valeurs des éléments ne sont pas définies.

Si j'utilise un hôte (onmousemove) dans la directive, cela fonctionne très bien. Mais je veux définir les valeurs lors du démarrage.

Une idée de ce qui me manque?

Voici le composant de test qui l'utilise.

@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 ne sont pas disponibles dans le constructeur. Ils sont définis par la détection des modifications et la détection des modifications est exécutée après l'instanciation du composant. Les hooks du cycle de vie ngOnChanges (à chaque mise à jour) et ngOnInit (une fois après le premier appel à ngOnChanges) sont appelés après que la détection des modifications a mis à jour une entrée:

Changement

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

à

constructor(private el: ElementRef) {};

ngOnInit() {
  this.setElement();
}

ngOnInit() est appelée après l'initialisation des entrées.

Au lieu de

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

il vaut mieux utiliser

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

En fait, je ne me suis pas essayé d'ajouter @HostBinding() et @Input() sur le même champ, mais je ne vois pas pourquoi cela ne fonctionnerait pas.

44
Günter Zöchbauer