Angular 5实现单选功能：点击仅保持当前节点激活

我来帮你搞定这个节点单选的问题～看你现在的代码，主要问题出在activeButton方法里：你只处理了当前点击节点的状态，没把其他所有节点的激活状态重置，而且内部的判断逻辑有点绕（先把节点设为false又立刻设为true，这会导致点击已激活的节点时状态根本不会变化，更别说单选了）。

修正后的TypeScript代码 #

activeButton(node) {
  // 先把所有节点的激活状态都关掉，确保只有后续选中的节点能亮起来
  this.data.forEach(item => {
    item.isActive = false;
  });
  // 再把当前点击的节点设为激活状态
  node.isActive = true;
}

为啥这么改？ #

• 第一步遍历整个data数组，把每个节点的isActive都设为false，这样不管之前哪些节点是激活的，都会立刻变回非激活状态。
• 第二步单独给当前点击的节点开激活状态，这样就完美实现了“仅当前节点激活”的单选效果。

额外优化：如果是树形结构（带子节点） #

要是你的data是多层树形结构，上面的遍历只能处理一级节点，子节点的状态不会被重置，这时候就得用递归遍历所有节点：

// 递归函数：把所有节点（包括子节点）的激活状态都关掉
resetAllNodes(nodes: any[]) {
  nodes.forEach(node => {
    node.isActive = false;
    // 如果有子节点，继续递归处理
    if (node.getChildren().length > 0) {
      this.resetAllNodes(node.getChildren());
    }
  });
}

activeButton(node) {
  // 先调用递归重置所有节点
  this.resetAllNodes(this.data);
  // 再激活当前节点
  node.isActive = true;
}

整理后的HTML代码 #

<div class="row">
  <div class="col-xs-10 col-sm-10 col-md-8" (contextmenu)="onRightClick($event, node)">
    <div class="toggle" [ngClass]="{'active': node.isActive}" (click)="activeButton(node)">
      <div [ngStyle]="node.styles()">
        <!-- 展开/折叠图标 -->
        <i *ngIf="node.getChildren().length > 0 && !node.isExpanded()" (click)="node.toggle()">
          <i class="fa fa-plus"></i>
        </i>
        <i *ngIf="node.getChildren().length > 0 && node.isExpanded()" (click)="node.toggle()">
          <i class="fa fa-minus"></i>
        </i>
        <!-- 叶子节点图标 -->
        <i *ngIf="node.getChildren().length === 0">
          <i class="fa fa-circle-notch"></i>
        </i>
        {{node.title}}
      </div>
    </div>
  </div>
</div>

这样改完之后，不管点击哪个节点，其他所有节点都会变回黑色，只有当前点击的节点会显示active类对应的绿色样式啦～

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