“Класс переключения углового ng-click” написан на английском языке. Это относится к определенной функциональности в платформе Angular, где директива ng-clickиспользуется для переключения класса CSS.
Вот несколько методов, которые вы можете использовать для достижения этой функциональности в Angular:
-
Метод 1. Использование привязки свойств и директивы ngClass.
В шаблоне HTML вы можете привязать свойство к классу, используя синтаксис[class.className].. Затем используйте директивуngClassдля переключения свойства на основе условия. Например:<div [class.active]="isActive" (click)="isActive = !isActive">Toggle Class</div> -
Метод 2. Использование Renderer2:
В свой компонент импортируйте классRenderer2из@angular/core. Используйте методыaddClassиremoveClassдля переключения класса элемента. Например:import { Component, ElementRef, Renderer2 } from '@angular/core'; @Component({ selector: 'app-example', template: '<div #myDiv (click)="toggleClass(myDiv)">Toggle Class</div>' }) export class ExampleComponent { constructor(private renderer: Renderer2) {} toggleClass(elementRef: ElementRef): void { this.renderer.addClass(elementRef.nativeElement, 'active'); // Use removeClass instead of addClass to toggle off the class. } } -
Метод 3: использование ViewChild:
В вашем компоненте используйте декораторViewChild, чтобы получить ссылку на элемент в вашем шаблоне, а затем переключите класс с помощьюclassListсвойство. Например:import { Component, ElementRef, ViewChild } from '@angular/core'; @Component({ selector: 'app-example', template: '<div #myDiv (click)="toggleClass()">Toggle Class</div>' }) export class ExampleComponent { @ViewChild('myDiv') myDiv: ElementRef; toggleClass(): void { this.myDiv.nativeElement.classList.toggle('active'); } }