使用输出和输入事件关闭扩展面板以动态添加组件

问题描述

我正在将动态添加的组件推入数组“元素”

 this.elements.push({ view,component });

每个组件都有一个mat-expansion-panel，如：

 <mat-expansion-panel fxFlex="100" [expanded]="!closed" (opened)="emitOpened()" >

在每个组件中，都有一个Input（）关闭，并且在打开面板时会发出事件发射器panelOpened：

  emitOpened() {
    this.panelOpened.emit();
  }

打开这些组件的扩展面板之一时，所有其他组件的面板应关闭。

  closeOtherQuestions() {
    this.elements
      .map((el) => el.component)
      .forEach((c) => {
        c.panelOpened.subscribe((open) => {
          this.elements
            .map((el) => el.component)
            .filter((item) => item !== c)
            .forEach((item) => (item.closed = true));
        });
      });
  }

我在订阅这些组件中的每个组件的输出事件后试图传递封闭状态。现在，它无法正常工作。我看到预订被放置在forEach循环中，因此触发了多次。

解决方法

您可以结合使用combineLatest和pairWise在数组中查找应该关闭的元素。对于这种方法，您需要将panelOpened事件更改为expansionChanged事件，该事件将当前状态保留为布尔值。

emitOpened() {
    this.expansionChanged.emit(true);
  }

emitClosed() {
    this.expansionChanged.emit(false);
  }

现在您可以做

combineLatest(this.elements.map(el => el.component.expansionChanged)).pipe(
  pairWise(),map(([prev,curr]) => curr.findIndex((el,i) => el && prev[i])),).subscribe(
  index => this.elements[index].component.closed = true;
);