2017-03-14 2 views
0

Wir haben ein Argument mit meinen Teamkollegen darüber, ob wir von einer Angular2-Ansicht aus eine TypeScript-Methode (Komponente) aufrufen sollen, um die richtige CSS-Klasse für die Ansicht zu berechnen und zurückzugeben.Sollte eine Typoskript/Javascript-Methode CSS-Klassen berechnen und zurückgeben?

Ansicht

<div class="{{ getClass() }}"> ... </div> 

Komponente

getClass():string { 
    //some logic 
    return 'myCSSclass'; 
} 

Das Hauptproblem ist die Kopplung von CSS-Klassennamen in CSS und ts-Dateien. Gibt es einen empfohlenen Weg, dies auf eine andere Weise zu tun?

+1

Sie können auch [ngClass] (https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html) verwenden – YounesM

+1

Diese Frage ist wirklich meinungsbezogen. Es gibt nichts, was Sie davon abhält, und von dem, was ich verstehe, hat Angular2 [eine andere Theorie über Stile für Komponenten] (https://angular.io/docs/ts/latest/guide/component-styles.html), also Sie Ich möchte dort etwas recherchieren. –

Antwort

1

genau wie YounesM sagte:

<div [ngClass]="getClass()"> ... </div> 
+1

Dies beantwortet nicht die Frage, ob das OP * Logik wie diese in eine Komponente setzen soll, wie. –

+0

@ Bougarfaoui El Houcine Danke, aber das ist nicht das Problem hier. – Konst

+0

yes Sie können eine Methode aus Ihrer Sicht definieren, da für die Rückgabe der Klasse Logik erforderlich ist –

0

https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

Sie nutzen könnten [ngClass], die in einem Array von CSS-Klasse Namen nimmt, oder ein Objekt, in dem die Schlüssel Eigenschaftsnamen und die Werte sind boolesche Werte (normalerweise an eine Klasseneigenschaft oder -methode gebunden), die bestimmen, ob die Klasse angewendet werden soll oder nicht.

Wenn Sie CSS-Klassennamen von ihren Vorlagen entkoppeln möchten, ist es wahrscheinlich besser, die Klassen in einem separaten Namespace zu platzieren. Dann können Sie in der Vorlage auf ihre Eigenschaften verweisen, ohne sich Gedanken darüber machen zu müssen, welcher Eigenschaft sie zugeordnet sind zu.

Verwandte Themen