Question

在Angular中，我想使用ngClass和click事件来切换类。我在网上看了一下，但有些是angular1，没有任何明确的指示或示例。任何帮助将不胜感激！

在HTML中，我有以下内容：

<div class="my_class" (click)="clickEvent($event)"  ngClass="{'active': toggle}">                
     Some content
</div>

在.ts：

 clickEvent(event){
    //Haven't really got far
    var targetEle = event.srcElement.attributes.class;        
 }

Answer 1

这应该适合你：

In [327]: x=np.linspace(-2,2,5); y=np.linspace(0,1,5); z=np.linspace(.5,1,5)
In [328]: (y<.25)&(z>.9)&(x!=0)
Out[328]: array([False, False, False, False, False], dtype=bool)
In [329]: (y<.25)|(z>.9)|(x!=0)
Out[329]: array([ True,  True, False,  True,  True], dtype=bool)
In [330]: np.where((y<.25)|(z>.9)|(x!=0))
Out[330]: (array([0, 1, 3, 4], dtype=int32),)

Answer 2

您无需在ts文件中创建函数，而是可以从模板本身切换变量。然后，您可以使用该变量将特定类应用于元素。像这样 -

<div (click)="status=!status"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

因此，当状态为true时，将应用类成功。当它是假的危险类被应用。

这将在ts文件中没有任何其他代码的情况下工作。

Answer 3

ngClass应该用方括号括起来，因为这是一个属性绑定。试试这个：

<div class="my_class" (click)="clickEvent($event)"  [ngClass]="{'active': toggle}">                
     Some content
</div>

在您的组件中：

     //define the toogle property
     private toggle : boolean = false;

    //define your method
    clickEvent(event){
       //if you just want to toggle the class; change toggle variable.
       this.toggle != this.toggle;       
    }

希望有所帮助。

Answer 4

使用renderer2的Angular6，不带任何变量和干净的模板：

模板：

<div (click)="toggleClass($event,'testClass')"></div>

在ts中：

toggleClass(event: any, class: string) {
  const hasClass = event.target.classList.contains(class);

  if(hasClass) {
    this.renderer.removeClass(event.target, class);
  } else {
    this.renderer.addClass(event.target, class);
  }
}

也可以将其放入指令中；）

Answer 5

如果您正在寻找一种以 angular 执行此操作的 HTML 唯一方法...

<div #myDiv class="my_class" (click)="myDiv.classList.toggle('active')">
  Some content
</div>

重要的是 #myDiv 部分。

这是一个 HTML 节点引用，因此您可以使用该变量，就像将其分配给 document.querySelector('.my_class')

注意：此变量是特定范围的，因此您可以在 *ngFor 语句中使用它

Answer 6

如果要使用切换按钮切换文本。

正在使用引导程序的HTMLfile：

<input class="btn" (click)="muteStream()"  type="button"
          [ngClass]="status ? 'btn-success' : 'btn-danger'" 
          [value]="status ? 'unmute' : 'mute'"/>

TS文件：

muteStream() {
   this.status = !this.status;
}

Answer 7

我们还可以使用ngClass根据以下多种条件分配多个CSS类：

<div
  [ngClass]="{
  'class-name': trueCondition,
  'other-class': !trueCondition
}"
></div>

Answer 8

因此，通常您将在类中创建一个支持变量，并在单击时切换它，并将类绑定绑定到该变量。像这样：

unordered_map<size_t, size_t> indexFun(vector<int> sumNumbers) {
    unordered_map<size_t, size_t> someThings;

    for (size_t i = 0; i < sumNumbers.size(); ++i) {

        // do something with indices
        size_t iMutated = i - 5;
        someThings[i] = iMutated;
    }

    return someThings;
}

Answer 9

你可以试试这个。

HTML。

<button *ngFor="let color of colors; let index=index" class="example1" 
        (click)="selectColor(index)" [class.choose__color]="viewMode == index">
    <mat-icon>fiber_manual_record</mat-icon>
</button>

css。

.example1:hover {
    border-bottom: 2px solid black;
}

.choose__color {
     border-bottom: 2px solid black;
}

ts。

selectColor(index: any) {
    this.viewMode = index;
}

用于切换类的Angular ngClass和click事件

9 个答案: