css - Fjern eller legg til klasse i Angular

Jeg har en liste, og pluginen (dragula) jeg brukte, legger til en bestemt CSS-klasse ved en viss handling. Jeg bruker Angular 5. Jeg vil finne ut om en bestemt klasse (myClass) er til stede, og fjerne den og erstatte den med (yourClass). I jQuery kan vi gjøre det slik

$( "p" ).removeClass( "myClass" ).addClass( "yourClass" );

Hvordan kan jeg oppnå dette i Angular5. Hovedproblemet her er at myClass legges automatisk til det valgte li av pluginen. Så ved å bruke en funksjon kan jeg ikke sette klassen.

Når jeg prøvde med renderer2, fjerner den CSS-klassen og legger til en annen klasse. Men den legger det bare til på den første li. Koden min er:

let myTag ; 
myTag = this.el.nativeElement.querySelector("li");
this.renderer.addClass(myTag, 'gu-mirrorss')
this.renderer.removeClass(myTag, 'dragbox');

<div  class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions"> 
       {{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
       <li #vc  data-toggle="tooltip" data-placement="bottom" title= {{question.questionSentence}} class="well dragbox"  *ngFor="let question of questions; let i = index" [attr.data-id]="question.questionId" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)"  #myId > {{question.questionId}} {{question.questionSentence}}</li>
</div>

Svar #1

Importer ElementRef fra Angular-kjernen og definer det i konstruktøren, og prøv deretter koden nedenfor:

Nedenstående kodelinje vil gi deg første forekomst av <p>-taggen fra komponenten. querySelector gir deg det første elementet, og querySelectorAll gir deg alle elementene fra DOM.

import { Component, ElementRef } from "@angular/core";

constructor(private el: ElementRef) {
}

let myTag = this.el.nativeElement.querySelector("p"); // you can select html element by getelementsByClassName also, please use as per your requirement.

Legg til klasse:

if(!myTag.classList.contains('myClass'))
{
    myTag.classList.add('myClass'); 
}

Fjern klasse:

myTag.classList.remove('myClass');

Svar #2

Du kan bruke id i din HTML

<button #namebutton class="btn btn-primary">login</button>

legg til viewchild i din.ts

@ViewChild('namebutton', { read: ElementRef, static:false }) namebutton: ElementRef;

lag en funksjon som vil utløse hendelsen

 actionButton() {
    this.namebutton.nativeElement.classList.add('class-to-add')
    setTimeout(() => {
      this.namebutton.nativeElement.classList.remove('class-to-remove')
    }, 1000);
  }

og kall funksjonen.

Hvis ditt native element er udefinert, sjekk dette svaret Angular: nativeElement er udefinert på ViewChild

Relaterte artikler