Wie füge ich mehrere Klassen mit der Host-Eigenschaft hinzu?CSS

CSS verstehen
Guest
 Wie füge ich mehrere Klassen mit der Host-Eigenschaft hinzu?

Post by Guest »

component.scss

Code: Select all

:host {
//some css props and values
}

:host.xyz {
//some props and values
}

:host.pqr {
//some props and values
}
component.ts

Code: Select all

@Component({
//all component's metadata added.
host: {
class: 'xyz', // how do i use class pqr here ?
}
})
export class Component {
type = input.required(); //signal
}
component.html Problem: Ich möchte mehrere Klassen in der Host-Eigenschaft verwenden, was eine Alternative zu @HostBinding()
ist Alternativ: Ich habe es mit der Verwendung der folgenden Signale andersherum versucht:
nur den Teil der Host-Eigenschaft hinzufügen.

Code: Select all

host: { '[class.xyz]': 'type === "xyz"', '[class.pqr]': 'type === "pqr"' }
Mit dem obigen Code wird die Klasse nicht angewendet, da die Eingabeeigenschaft zum Zeitpunkt der Anwendung der Klasse ihren Wert nicht erhält.
Erwartet – Die Klassen sollten auf das Hostelement angewendet werden, wenn wir die Typeingaben basierend auf type = xyz oder type = pqr als Zeichenfolgen übergeben.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post