Uunganisho wa wingi wa madarasa ya CSS katika Angular

Kwa kutumia derectiva ngClass unaweza kuwasha na kuzima darasa la CSS mara moja kwenye kitambulisho. Derectiva inakubali kitu kama thamani, ambayo funguo zake zitakuwa madarasa, na thamani - maadili ya boolean. Darasa litakuwa limewashwa ikiwa thamani true imewekwa, na limezimwa ikiwa false.

Tuangalie kwa vitendo. Hebu tuseme tuna madarasa yafuatayo:

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

Tuangalie kwa mifano, jinsi ya kuwasha na kuzima madarasa haya kwa block.

Mfano

Washa darasa moja na uzime lingine:

app/app.component.html<div [ngClass]="{blue: true, bold: false}">
  maandishi
</div>

Mfano

Hebu hali za madarasa zihifadhiwe kwenye sifa za darasa:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

Weka mwonekano wa darasa kulingana na thamani za sifa zetu:

app/app.component.html<div [ngClass]="{blue: isBlue, bold: isBold}">
  maandishi
</div>

Mfano

Sifa inaweza kuwa na kitu kizima chenye madarasa na hali:

app/app.component.tsexport class AppComponent {
  public styles = {
    blue: false,
    bold: true,
  }
}

Weka kitu hiki kwenye block yetu:

app/app.component.html<div [ngClass]="styles">
  maandishi
</div>

Mfano

Thamani za kitu chetu zinaweza kupatikana kutoka kwa sifa zingine za darasa:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = false;
  public isBold: boolean = true;

  public styles = {
    blue: this.isBlue,
    bold: this.isBold,
  }
}

Weka kitu hiki kwenye block yetu:

app/app.component.html<div [ngClass]="styles">
  maandishi
</div>

Kazi za Vitendo