Question

我创建了一个类似p-overpanpanel的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绑定。这意味着至少要以一种或另一种方式添加至少三件事：用于确定面板是否处于活动状态的Input绑定，用于标识面板的Input绑定以及用于指示正在显示该面板的Output绑定：

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

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

  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

角覆盖面板每次打开都保持不变

1 个答案: