Angular 覆盖面板每次都保持打开状态

Question

我已经创建了一个像 p-overlaypanel 这样的 Angular 组件，但它对我单击的每个项目都保持打开状态，我希望如果我单击另一个覆盖面板，最后单击的应该被隐藏，我不希望只有一个被单击并显示不是每个人 您可以在下面找到 stackblitz 中的代码。

https://stackblitz.com/edit/angular-yrsyt6?file=src/app/app.component.ts

这里是代码

<div class="dropdown">

  <div  class="body">
    <ng-content select="[body]"></ng-content>
  </div>

  <div *ngIf="active" class="popup">
    <ng-content select="[popup]"></ng-content>
  </div>

</div>
.dropdown {
  position: relative;
  display: inline-block;
}

.popup {
  display: block;
  position: absolute;
  z-index: 1000;
}

export class OverlaypanelComponent implements OnInit {

  active = false;

  constructor() {

  }

  ngOnInit() {

  }
  @HostListener('document:click', ['$event']) clickedOutside($event) {
    this.active = false;
  }

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

  close() {
    this.active = false;
  }

}

Answer 1

为了做到这一点，您必须让子组件（面板）以某种方式与其已打开的父组件通信，并且关闭其他面板将是父组件的责任。为此，active 属性也应该是一个输入绑定。这意味着以一种或另一种方式添加至少三件事：一个输入绑定来确定面板是否处于活动状态，一个输入绑定来识别面板，以及一个输出绑定来表示面板正在显示：

@Input() active = false;
@Output() activeChanged = new EventEmitter();
@Input() index;

toggle($event) {
  $event.preventDefault();
  $event.stopPropagation();
  this.active = !this.active;
  if (this.active) {
    this.activeChanged.emit(this.index);
  }
}

现在您的父组件将必须绑定到这些属性并响应输出以更改其他面板的绑定。使用数组或一些可用于包含面板的迭代数据结构应该很容易做到这一点。

  panels = new Array(4).fill({ active: false });

  closeOtherPopups(index) {
    this.panels = this.panels.map((panel, idx) => (
      { active: idx === index }
    ));
  }

在此处查看实际操作：https://stackblitz.com/edit/angular-u96ssk?file=src/app/app.component.ts