تایپاسکریپت - نیتیواسکریپت انگولار ۲ - اضافه کردن کلاس به برچسب هنگام کلیک

من میخواهم یک دکمه لایک (مثل اینستاگرام، توییتر و غیره) در اپلیکیشن nativescript angular 2 خودم پیادهسازی کنم. کلیک روی برچسب باید کلاس "active" را به برچسب اضافه کند. پس از کلیک دوباره، باید کلاس "active" را حذف کند.

home.component.html

<label text="{{ post.likes }}" class="" (tap)="like()">

home.component.html (بعد از کلیک روی برچسب)

<label text="{{ post.likes }}" class="active" (tap)="like()>

home.component.ts

like() {
    if (/* post contains "active" class */) {
        // remove "active" class to label
    } else {
        // add "active" class to label
    }
}

پاسخ شماره ۱

شما باید از ngClass در اینجا استفاده کنید.

<Label text="{{ post.likes }}" [ngClass]="liked ? 'active' : ''" (tap)="like()></Label>

و در فایل home.component.ts خود

like() {
//toggle this.liked here.
}

پاسخ شماره ۲

شما میتوانید از متغیری که ذخیره میکند آیا پسندیده شده است یا نه استفاده کنید. بر اساس آن، کلاس به عنصر اضافه یا از آن حذف میشود. مثال:

@Component({
    selector: 'app-element',
    template: '<div [class.liked]="post.liked">Hello Post <button (tap)="toggleLiked(post)"></button> </div>',
    styles: [`
       .liked {
           color: red
       }
    `]

})
export class AppComponent {
    liked = false;
    toggleLiked(post): void {
       post.liked = !post.liked;
    }
}

توجه: کار میکند زیرا مرجع شیء است. مثال: https://stackblitz.com/edit/angular-mkravu?file=src%2Fapp%2Fapp.component.html