Angular fügt Klasse dynamisch hinzu

Lesezeit: 3 Minuten

Gibt es eine Möglichkeit, eine Klasse aus der .ts-Datei mit Angular-Lösungen hinzuzufügen

<div [class.extra-sparkle]="isDelightful == true">

Ich möchte das Obige tun, aber von der Seite der .ts-Datei. Je weniger Code, desto besser.

<button class="general" (click)="ChangeScreen('Global')"       [class.selected]="CurrentPage == 'Global'">Global</button>
<button class="general" (click)="ChangeScreen('Maintenance')"  [class.selected]="CurrentPage == 'Maintenance'">Maintenance</button>
<button class="general" (click)="ChangeScreen('Settings')"     [class.selected]="CurrentPage == 'Settings'">Settings</button>
<button class="general" (click)="ChangeScreen('Profile')"      [class.selected]="CurrentPage == 'Profile'">Profile</button>
<button class="general" (click)="ChangeScreen('Transactions')" [class.selected]="CurrentPage == 'Transactions'">Transactions</button>

Ich möchte einfach so etwas in die ChangeScreen-Funktion einfügen:

ChangeScreen(page) {
    page.addClass = page;
}

Dann kann ich alle diese Zeilen entfernen: [class.selected]="CurrentPage == '...'"

  • Sie können eine dynamische Klasse mithilfe der Direktive hinzufügen

    – Chellapan வ

    5. Juli 2018 um 9:02 Uhr

  • Mögliches Duplikat von Add class to an element in Angular 4

    – Arun Kumaresh

    5. Juli 2018 um 9:03 Uhr

Benutzeravatar von sticky_elbows
sticky_ellbows

Sie können verwenden ngClass Richtlinie:

<div id="mydiv" [ngClass]="{'myCSSclass' : condition}"></div>

So einfach ist das! myDiv wird die Klasse haben myCSSclass erst wenn die condition wertet zu true. Diese Bedingung kann in Ihrer Typoskriptdatei oder in der Vorlage festgelegt werden.

  • ngClass ist kein bekanntes Element von div. wir können es nicht mit div verwenden

    – Mariah

    2. Oktober 2020 um 9:35 Uhr

Benutzeravatar von לבני מלכה
לבני מלכה

Verwenden Renderer

Siehe hier:https://angular.io/api/core/Renderer

und hier:https://angular.io/api/core/Renderer#setElementClass

import { Renderer } from '@angular/core';

constructor(private render:Renderer) { }

ChangeScreen(event:any) {
 this.renderer.setElementClass(event.target,"selected",true);
}

Im HTML-Format:

<button class="general" (click)="ChangeScreen()">Global</button>

Oder Render2:

Siehe hier:https://angular.io/api/core/Renderer2

und hier:https://angular.io/api/core/Renderer2#addClass

import { Renderer2 } from '@angular/core';

constructor(private render:Renderer2) { }

ChangeScreen(event:any) {
 this.renderer.addClass(event.target,"selected");
}

Im HTML-Format:

<button class="general" (click)="ChangeScreen($event)">Global</button>

  • Die Klasse, die ich hinzufüge, ist .selectednicht die Seitennamen

    – Paul Krüger

    5. Juli 2018 um 9:31 Uhr

  • Aber wenn Sie jetzt 10 Tasten mit haben [ngClass]="page" dann bekommen sie alle die .selected angewandt. Ich möchte, dass jeweils nur eine ausgewählt wird

    – Paul Krüger

    5. Juli 2018 um 9:37 Uhr


  • Ich denke, besser Render2 verwenden

    – לבני מלכה

    5. Juli 2018 um 10:02 Uhr

  • Wir kommen dahin 🙂 ! Haha. Das Problem ist jetzt, dass Sie die entfernen müssen .selected von allen vorherigen. Denn dies wird die hinzufügen .selected Klasse schön, aber es entfernt nie vorherige

    – Paul Krüger

    5. Juli 2018 um 11:03 Uhr


  • natürlich und du hast die Funktion removeclass (und ich eine Frau:) )

    – לבני מלכה

    5. Juli 2018 um 11:05 Uhr

Während die Lösung mit dem Renderer funktioniert, schlage ich vor, dass Sie eine Datenstruktur für Ihre Schaltflächen erstellen

buttons: Array<{label: string}> = [
    {
      label: 'Global'
    },
    {
      label: 'Maintenance'
    },
    {
      label: 'Settings'
    },
    {
      label: 'Profile'
    },
    {
      label: 'Transactions'
    }
  ]

Dies kann leicht durch Verwendung iteriert werden ngFor

<button 
  *ngFor="let button of buttons" 
  class="general" 
  (click)="ChangeScreen(button.label)" 
  [class.selected]="CurrentPage == button.label">
  {{ button.label }}
</button>

Und nur deine ChangeScreen Methode benötigt wird, ist … was sie bereits tut, das Setzen der aktuellen Seite!

Sehen Stackblitz für ein Beispiel, wie sich das auswirkt.

  • Ich habe nicht das Gefühl, dass dies das Problem „Angular Klasse dynamisch hinzufügen“ wirklich löst, aber dies ist eine großartige Lösung! Vielen Dank!

    – Paul Krüger

    5. Juli 2018 um 11:07 Uhr

1429960cookie-checkAngular fügt Klasse dynamisch hinzu

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy