当我们想要“只选择一个”时，我们使用简单的变量并存储值，而不使用“项目”的属性或数组。

itemSelected:any=null

并将ngClass用作

<div class="treeView" (click)="onexpand(item)"  
      [ngClass]="{'treeViewSelected': item==itemSelected, 
                  'treeViewExpanded': item.isExpanded}">
    ...
</div>

因为“itemSelected”只有一个，你需要itemSelected属于“parent”。所以我们使用itemSelected itemSelectedChange。因为我们有一个递归元素，我们还需要将值发送到“parent”。所以itemSelect实际上将是，一个@Input，一个@Ouput和一个getter来发送值。有些像

_itemSelected: any = null;
  @Input('itemSelected') set _(value: any) {
    this._itemSelected = value;
  }
  get itemSelected() {
    return this._itemSelected;
  }
  set itemSelected(value: any) {
    this._itemSelected = value;
    this.itemSelectedChange.emit(value);
  }
  @Output() itemSelectedChange: EventEmitter<any> = new EventEmitter<any>();

并使用emit更改onexpand

onexpand(item) {
    this.itemSelectedChange.emit(item == this.itemSelected ? null : item);

    if (item.expanded) {
      item.expanded = !item.expanded;
      return;
    } else {
      if (item.children) {
        if (item.children.length > 0) {
          item.expanded = true;
        } else {
          item.expanded = false;
        }
      }
    }
  }

现在我们使用两种方式绑定。
应用程序组件中

itemSelected:any=null
//and

<app-tree [items]="sampleData" [(itemSelected)]="itemSelected"></app-tree>

在递归组件中

<ul class="tree-view">
  <li *ngFor="let item of items">
    ...
    <ul *ngIf="item.children && item.expanded">
      <!--here use the two binding too-->
      <app-tree [items]="item.children" [(itemSelected)]="itemSelected">
      </app-tree>
    </ul>
  </li>
</ul>

您的forked stackblitz