Angular Learning: Detaillierte Erläuterung der Verwendung der Stilbindung (ngClass und ngStyle)

Projektszenario:

Bei der Front-End-Entwicklung stoßen wir häufig auf eine solche Situation: Verschiedene Seiten teilen denselben Code und gleichzeitig müssen wir die spezifischen Informationen von verwenden Die Seite oder ein bestimmter Vorgang (z. B. Klicken auf eine bestimmte Schaltfläche) entscheiden, ob dieser Code angezeigt oder bestimmte Änderungen am Seitenstil vorgenommen werden sollen. Zu diesem Zeitpunkt wird die Stilbindung in unserem Angular verwendet!

---

Problembeschreibung

Zum Beispiel: Zwei Seiten der Website müssen denselben Code verwenden, entspricht nicht dem trockenen Prinzip (wiederholen Sie sich nicht) und ist außerdem sehr ineffizient , also das Unternehmen Angular Dies wird normalerweise nicht in Front-End-Entwicklungsprojekten durchgeführt. Wenn Ihr Leiter Ihnen eines Tages sagt: zzz, ändern Sie bitte den Code. Mit dieser Aufforderung möchte ich diesen Effekt auf dieser Seite und diesen Effekt auf einer anderen Seite. Nachfolgend finden Sie ein einfaches Beispiel zur Veranschaulichung. [Verwandte Tutorial-Empfehlungen: „Angular Tutorial“]

Gemeinsame Codefragmente (vor der Änderung):

<div class="normalTxt">      
	<span >I love angular</span>         
</div>

---

Ursachenanalyse:

Die Stilbindung in Angular kann die oben genannten Anforderungen erfüllen, Angular hat zwei Stile Bindungsanweisungen: [ngStyle], [ngClass]
Hinweis: Sie müssen bei Verwendung in [ ] eckige Klammern eingeschlossen werden!

1.[ngStyle]

<any [ngStyle]=“obj”>

Anweisungen:

• Der Tag-Typ, den any darstellt Die Stilbindung kann ein beliebiger Typ sein, z. B. div, p, span usw.
• Hier Codestück einfügen. Der von ngStyle gebundene Wert muss ein Objekt sein.
• Das Objektattribut ist der Name des CSS-Stils und der Wert des Objekts ist der spezifische Stil.

Einfache Verwendung (HTML-Datei):

//将这段div的背景色改为绿色
<div [ngStyle]="{&#39;background-color&#39;:&#39;green&#39;}">
xxxx
</div>

Komplexe Verwendung (HTML-Datei):

//如果当前页面为主页则将背景色改为绿色，否则改为红色
<div [ngStyle]="{&#39;background-color&#39;:pageName== &#39;homepage&#39; ? &#39;green&#39; : &#39;red&#39; }">
xxxx
</div>

2.[ngClass]

<any [ngClass]=“obj”>

Beschreibung:

• Jeder Tag-Typ, der die Stilbindung darstellt, kann ein beliebiger Typ sein, z als div, p, span usw.
• Der an ngClass gebundene Wert muss ein Objekt sein.
• Das Objektattribut ist der Klassenname, und der Attributwert ist vom booleschen Typ und das Ergebnis kann nur wahr/falsch sein. Wenn wahr, wird die Klasse angezeigt, andernfalls wird die Klasse nicht angezeigt.

Einfache Verwendung (HTML-Datei):

//使用.homepageText样式
<div [ngClass]="{&#39;homepageText&#39;:true}">
xxxx
</div>

Komplexe Verwendung (HTML-Datei):

//当页面名称是homepage时使用.homepageText样式，否则不使用
<div [ngClass]="{&#39;homepageText&#39;:pageName ==&#39;homepage&#39;}">
xxxx
</div>

(CSS-Datei):

.homepageText {    
font-size: 14px;
font-weight: bold;
}

---

Lösung:

Das Folgende ist die Lösung für das Problem am Anfang , hoffe zu geben. Bringen Sie bitte etwas Inspiration mit. Die spezifischen Stile von normalTxt und specialTxt müssen in den entsprechenden .css/.scss-Dateien hinzugefügt werden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonAngular Learning: Detaillierte Erläuterung der Verwendung der Stilbindung (ngClass und ngStyle). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!