html - Tıklayınca sınıfı dinamik olarak nasıl ekler ve 2 saniye sonra nasıl kaldırırsınız?

Sorumu nasıl doğru bir şekilde formüle edeceğimi bilmiyordum, bu yüzden kendimi burada açıklamaya çalışacağım:

Angular 7 uygulamamda, menü öğeleri olarak simgeler bulunan bir navigasyon çubuğum var.

Tıklandığında, onların belirli bir sınıfı almasını istiyorum ve sınıf 2 saniye sonra kaybolmalı.

7 elementim var, işte 2 tanesi örnek olarak:

        <li class="fushia-icon">
            <a routerLink="/savoir" routerLinkActive="fushia-icon-active" class="animated"
               [class.flip]="this.iconIsClicked" (click)="iconClicked(this.iconIsClicked = true)">
            </a>
        </li>


        <li class="beige-icon">
            <a routerLink="/diplomes" routerLinkActive="beige-icon-active" class="animated"
               [class.flip]="this.iconIsClicked" (click)="iconClicked(this.iconIsClicked = true)">  
            </a>
        </li>

ts dosyamda bunu yaptım :

 iconClicked(icon){
        setTimeout(()=> {
            icon = false
        }, 2000)
    }

Ama bu, benim istediğimi hiç yapmıyor çünkü ikisi de sınıfı alıyor ve iconIsClicked değeri, analiz edilecek elemana geri dönmüyor (bariz).

Her ikonun kendi şeylerine sahip olması için 7 değişkenle 7 fonksiyon oluşturabileceğimi biliyorum, ama kodu çoğaltmadan daha hızlı bir yol arıyorum.

Teşekkürler

Cevap #1

Bir şablon referans değişkeni kullanabilir ve ekleyip/çıkarabilirsiniz (Element.classList yöntemleri).

HTML

<li class="fushia-icon">
    <a #fushiaIcon class="animated" (click)="iconClicked(fushiaIcon)"></a>
</li>
<li class="beige-icon">
    <a #beigeIcon class="animated" (click)="iconClicked(beigeIcon)"></a>
</li>

TS

iconClicked(menuIcon: HTMLElement) {
    menuIcon.classList.add('flip');

    setTimeout(()=> {
        menuIcon.classList.remove('flip');
    }, 2000)
}

Cevap #2

Yani amaç, her menü için aynı yöntemi kullanmaktır. Buradaki basit seçim, istediğimizi kolayca gerçekleştirebilecek bir Direktif kullanmaktır.

Bence bu tür şeyleri şöyle hatırlayabilirsin: bir yönerge, görünümü kontrol etmeni sağlar

Bunu, her li üzerinde bir onClick olayına sahip bir HostListener kullanarak kolayca yapmayı başardım

Stackblitz'e buradan ulaşabilirsiniz

alıntı: class-changer.directive.ts

constructor(private _ren: Renderer2, private _el: ElementRef) { }

@HostListener('click') onClick() {
    this._ren.addClass(this._el.nativeElement, 'bg-red');
    setTimeout(() => {
      this._ren.removeClass(this._el.nativeElement, 'bg-red');
    }, 2000)
  }

DÜZENLE
Stackblitzimi güncelledim. Böylece sınıf ekleyip çıkarmak kolay!

İlgili makaleler