Question

我想在我的nativescript angular 2应用程序中实现一个类似按钮（如instagram，twitter等）。单击标签应将“活动”类添加到标签。再次单击它后，它应删除“活动”类。

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
    }
}

Answer 1

您需要在此处使用ngClass。

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

并在home.component.ts

中

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

Answer 2

您可以使用存储喜欢或不喜欢的变量。因此，它将添加类或从元素中删除类示例：

@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

Nativescript Angular 2-单击添加标签类

2 个答案: