Verwenden einer Winkeldirektive zum Hinzufügen einer Klasse zum Hostelement

7

Ich lerne gerade Angular 2. Ich habe verstanden, wie man mit dem Angular Renderer einen ElementStyle setzt, aber jetzt möchte ich die Angular Renderer Funktion verwenden

setElementClass(renderElement: any, className: string, isAdd: boolean) : void

Meine Frage ist, wie kann ich eine CSS-Klasse in meine Attribut-Direktive importieren? Muss ich meine CSS-Klasse in Json konvertieren? Oder kann ich irgendwie eine CSS-Klasse zu meinem @ngModule hinzufügen?

    
Daniel Hoppe Alvarez 22.09.2016, 12:29
quelle

3 Antworten

20

Original OP hat gefragt, wie man den Renderer benutzt. Ich habe die @HostBinding der Vollständigkeit halber eingefügt.

Verwenden von @HostBinding

Um eine Klasse zu einem Element hinzuzufügen, können Sie @HostBinding

verwenden %Vor%

Verwenden von @HostBinding mit mehreren Klassen

Um die Verwendung mehrerer Klassen zu erleichtern, können Sie den ES6-Getter verwenden und die Klassen zusammenfügen, bevor Sie sie zurückgeben:

%Vor%

Verwenden des Renderers

Die API mit der niedrigsten Stufe ist Render2 . Renderer2 ist nützlich, wenn Sie über eine dynamische Gruppe von Klassen verfügen, die Sie auf ein Element anwenden möchten.

Beispiel:

%Vor%     
cgatian 06.05.2017, 12:43
quelle
5

Warum möchten Sie die Renderer- oder Renderer2-Klasse verwenden? Der bevorzugte Weg, dies in einer Direktive zu tun, ist die Verwendung des @HostBinding Dekorators.

Beispiel:

%Vor%     
csnate 13.09.2017 02:46
quelle
4

Beispiel für die Verwendung von Renderer und ElementRef zum Hinzufügen einer CSS-Klasse zu Element.

%Vor%

Die whatever-css-Klasse ist in einer CSS-Datei definiert, auf die in html

verwiesen wird     
jaguwalapratik 22.09.2016 12:56
quelle