如何在NativeScript Angular 2中实现点击标签切换active类的点赞按钮

嘿，这个功能用Angular的数据绑定来实现最优雅，完全不用手动操作DOM类，既符合Angular的设计理念，又适配NativeScript的环境。我给你一步步拆解：

1. 给Post对象添加点赞状态标记 #

不管你是单个post还是列表里的多个post，先给每个post加一个isLiked布尔值属性，用来标记当前是否处于点赞状态：

// 先定义Post的接口（如果还没定义的话）
interface Post {
  likes: number;
  isLiked: boolean; // 新增这个状态字段
  // 其他你需要的字段...
}

// 在组件类里初始化示例数据
export class HomeComponent {
  // 单个post的情况
  post: Post = { likes: 123, isLiked: false };

  // 多个post列表的情况（如果是列表就用这个）
  // posts: Post[] = [{ likes: 123, isLiked: false }, { likes: 45, isLiked: true }];
}

2. 模板里用类绑定实现状态自动切换 #

把原来的<label>改成用Angular的[class.active]绑定，直接关联isLiked状态，tap事件传递当前post对象：

<!-- 单个post的模板 -->
<label 
  text="{{ post.likes }}" 
  [class.active]="post.isLiked" 
  (tap)="like(post)"
></label>

<!-- 如果是列表（配合*ngFor使用） -->
<!-- <StackLayout *ngFor="let post of posts">
  <label 
    text="{{ post.likes }}" 
    [class.active]="post.isLiked" 
    (tap)="like(post)"
  ></label>
</StackLayout> -->

3. 实现like方法切换状态并更新点赞数 #

在组件类的like方法里，只需要切换isLiked的布尔值，同时根据状态增减点赞数即可——类的切换会由Angular自动处理：

like(post: Post) {
  if (post.isLiked) {
    // 取消点赞：点赞数-1
    post.likes--;
  } else {
    // 点赞：点赞数+1
    post.likes++;
  }
  // 切换点赞状态（这一步会自动触发class的添加/移除）
  post.isLiked = !post.isLiked;
}

如果你非要手动操作DOM类（不推荐） #

虽然上面的方式是最优解，但如果因为特殊需求你需要直接操作元素类，可以用ViewChild获取NativeScript元素，再调用它的类操作方法：

<!-- 给label加个模板引用变量 -->
<label 
  #likeLabel
  text="{{ post.likes }}" 
  (tap)="like(likeLabel)"
></label>

import { Label } from "@nativescript/core";

export class HomeComponent {
  post = { likes: 123 };

  like(label: Label) {
    if (label.classList.contains('active')) {
      label.classList.remove('active');
      this.post.likes--;
    } else {
      label.classList.add('active');
      this.post.likes++;
    }
  }
}

注意：这种方式在列表场景下会非常繁琐，每个label都要单独引用，所以强烈推荐第一种数据绑定的实现方式！

这样就完美实现了点击切换active类，同时同步更新点赞数的功能，和Instagram/Twitter的点赞逻辑完全一致~

内容的提问来源于stack exchange，提问作者Akrime