角递归组件阻止共享属性

Question

I have a recursive component to create a dynamically updating tree structure which can be collapsed. However, it seems that the active variable which determines the state is shared with child components. Is there any way to prevent this?

@Component({
  selector: 'app-og-span',
  templateUrl: './og-span.component.html',
  styleUrls: ['./og-span.component.css']
})
export class OgSpanComponent  {
  @Input() comments;
  private isActive = true;

  toggleActive($event) {
    console.log('wtf');
    this.isActive = !this.isActive;
    $event.stopPropagation();
    return false;
  }
}

And the HTML is:

<div class="ui accordion" style="padding-left: 15px" *ngFor="let comment of comments">
  <div class="title" [ngClass]="{'active': isActive}" (click)="toggleActive($event);$event.stopPropagation()">
    <i class="dropdown icon"></i>
    {{comment.text}}
  </div>
  <div class="content" [ngClass]="{'active': isActive}">
    <app-og-span [comments]="comment.comments" *ngIf="comment.comments"></app-og-span>
  </div>
</div>

I know the event is fired only once from logs. There was a case of variable scopes with AngularJS (1.x) but I cannot find to find the corresponding in 6 (2+)

Answer 1

It seems I was wrong changing the code to following worked, because I placed the *ngFor wrongly at the top to get the view I wanted but not semantically correct one (and I assumed the AngularJS 1.x case of variable scopes):

<div class="ui styled accordion" style="padding-left: 10px">
  <div class="title" (click)="click($event)" [ngClass]="{'active': active}">
    <i class="dropdown icon"></i>
    {{ node.name }}
  </div>
  <div class="content" [ngClass]="{'active': active}">
    <span *ngFor="let node of node.children">
      <app-og-span [node]="node"></app-og-span>
    </span>
  </div>
</div>

JS:

@Component({
  selector: 'app-og-span',
  templateUrl: './og-span.component.html',
  styleUrls: ['./og-span.component.css']
})
export class OgSpanComponent {
  @Input() node;
  private active = true;

  click($event) {
    this.active = !this.active;
    $event.stopPropagation();
  }
}