web-dev-qa-db-ja.com

Angularでクラスを削除または追加します

私が使用したリストとプラグイン（dragula）があり、特定のアクションに特定のCSSクラスを追加します。私はAngular 5.を使用しています。特定のクラス（myClass）の存在を確認し、それを削除して（yourClass）に置き換えたいです。jQueryでこのようにできます

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

Angular5でこれをどのように達成できますか？ここでの主な問題は、プラグインによってmyClassが選択したliに自動的に追加されることです。したがって、関数を使用してクラスを設定することはできません。

Renderer2を試したところ、CSSクラスが削除され、別のクラスが追加されました。ただし、最初のliにのみ追加されます。私のコードは：

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>
cssangulartypescript
6
Senchu Thomas

angularコアからElementRefをインポートし、コンストラクターで定義してから、以下のコードを試してください：

以下のコード行は、コンポーネントからの<p>タグの最初の出現を示します。 querySelectorは最初のアイテムを提供し、querySelectorAllは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.

クラスを追加：

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

クラスを削除：

myTag.classList.remove('myClass');
12
Sandip - Full Stack Developer

すべてのli.myClassを変更する場合は、次のようにします。

#questionsコンテナーdiv内。

Component.ts

@ViewChild('questions') questions: any;

questions.nativeElement.querySelectorAll('.myClass').forEach(
  question => {
    question.classList.remove('myClass');
    question.classList.add('newClass');
  }
)

Component.html

<div #questions 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>
2
LordAlpaca

から 公式ドキュメント

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
1
WasiF

最良かつ最も簡単な方法は次のとおりです：-

学生がnullの場合は無効になり、それ以外の場合は無効になります。これをボタン属性で使用します。 bootstrapテーマを使用している場合

[ngClass]="{disabled: (students === null) ? true : false}"
0
Inamur Rahman

HTMLでIDを使用できます

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

tour.tsにビューチャイルドを追加する

@ViewChild('buttonLogin') buttonLogin: ElementRef;

イベントをトリガーする関数を作成する

 actionButton() {
    this.buttonLogin.nativeElement.classList.add('clase a activar ')
    setTimeout(() => {
      this.buttonLogin.nativeElement.classList.remove('clase a desactivar')
    }, 1000);
  }

関数を呼び出します。

0
Daniel Lopez