Ich weiß nicht, wie ich meiner Komponente <component></component>
ein dynamisches Klassenattribut hinzufügen soll, aber innerhalb der Vorlage html (component.html).
Die einzige Lösung, die ich gefunden habe, besteht darin, das Element über das native Element "ElementRef" zu ändern. Diese Lösung scheint etwas kompliziert zu sein, um etwas zu tun, das sehr einfach sein sollte.
Ein weiteres Problem besteht darin, dass CSS außerhalb des Komponentenbereichs definiert werden muss, wodurch die Komponentenkapselung unterbrochen wird.
Gibt es eine einfachere Lösung? So etwas wie <root [class]="..."> .... </ root>
in der Vorlage.
quelle
someField = true
in-ngOnInit()
Methode machenngAfterViewInit()
. Ich könnte es sonst nicht zum Laufen bringen.:host
Teil funktioniert. Wo kann ich mehr über Host - Parameter in @Component () Dekorateur (die Syntax nicht mir klar ist, und die @Component Dokumentation erklärt nicht sehr viel ) oder mehr über Ihren bevorzugten HostBinding lernen (es nur ist als Schnittstelle aufgelistet auf Angular2 Seite?)@Input()
@Output()
@HostBinding()
@HostListener()
@ViewChild(ren)()
@ContentChild(ren)()
@HostBinding('class.xxx') get xxxclass(){ return !this.someField;}
Günters Antwort ist großartig (Frage fragt nach dynamischen Klassenattributen), aber ich dachte, ich würde nur der Vollständigkeit halber hinzufügen ...
Wenn Sie nach einer schnellen und sauberen Möglichkeit suchen , dem Host-Element Ihrer Komponente eine oder mehrere statische Klassen hinzuzufügen (dh zu Zwecken der Themengestaltung), können Sie einfach Folgendes tun:
Wenn Sie eine Klasse für das Eintragstag verwenden, führt Angular die Klassen zusammen, d. H.
quelle
ngcontent_host
eines der Attribute für Elemente in meiner Vorlage, let's call those
ngcontent_template, so if I put a style in the
styleUrls` meiner Komponente. Sie wirken sich nicht auf das Host-Element aus, da sie sich nicht aufngcontent_host
sie auswirken kann nur Vorlagenelemente beeinflussen; Sie können nur beeinflussenngcontent_template
. Irre ich mich Irgendwelche Vorschläge dazu? Ich denke, ich könnte mich immer umdrehenViewEncapsulation.None
@HostBinding('class.someClass') true;
. Sie können dies sogar von jeder Klasse aus tun, die Ihre Komponente erweitert.{}
-Variante verwenden, möchten Sie möglicherweise dieuse-host-property-decorator
Einstellung auffalse
in setzentslint.json
. Andernfalls erhalten Sie IDE-Warnungen. @adamdport Diese Methode funktioniert (nicht mehr). Verwenden von Angular 5.2.2 in unserer App.Sie können einfach
@HostBinding('class') class = 'someClass';
in Ihre @Component hinzufügen Klasse .Beispiel:
quelle
class
als Variablenname zu vermeiden (da Sie möglicherweise darauf verweisen und sie später ändern). Beispiel :@HostBinding('className') myTheme = 'theme-dark';
.Wenn Sie Ihrem Host-Element eine dynamische Klasse hinzufügen möchten, können Sie Ihre
HostBinding
mit einem Getter als kombinierenStackblitz-Demo unter https://stackblitz.com/edit/angular-dynamic-hostbinding
quelle
So habe ich es gemacht (Angular 7):
Fügen Sie in der Komponente eine Eingabe hinzu:
Fügen Sie dann in der HTML-Vorlage der Komponente Folgendes hinzu:
Und schließlich in der HTML-Vorlage, in der Sie die Komponente instanziieren:
Haftungsausschluss: Ich bin ziemlich neu in Angular, also habe ich hier vielleicht Glück!
quelle
<root>
Tag und nichts, was Sie der Elementvorlage hinzufügen.