Угловой рекурсивный компонент предотвращает совместное использование свойств

Question

У меня есть рекурсивный компонент для создания динамически обновляемой древовидной структуры, которая может быть свернута.Однако, похоже, что переменная active, которая определяет состояние, используется совместно с дочерними компонентами.Есть ли способ предотвратить это?

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

И HTML-код:

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

Я знаю, что событие вызывается только один раз из журналов.Был случай переменных областей с AngularJS (1.x), но я не могу найти соответствующий в 6 (2 +)

Answer 1

Кажется, я ошибся, изменив код на следующий, сработавший, потому что я неправильно разместил * ngFor в верхней части, чтобы получить желаемое представление, но не семантически правильное (и я предположил, что AngularJS 1. x регистр переменных областей):

<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();
  }
}