angular - 在 ngFor 中使用 mat-accordion 和 mat-expansion-panel

Question

我正在尝试使用 ngFor 循环一些项目，并为每个项目创建一个 mat-expansion-panel。

我想将每个项目的逻辑封装到一个项目组件中:

    <item></item>

初步尝试:

<mat-accordion>
  <div *ngFor="let item of items" >
    <item [item]="item"></item>
  </div>
</mat-accordion>

其中项目模板是:

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        Header Content
      </mat-expansion-panel-header>

      <div>
         Expandable content
      </div>
    </mat-expansion-panel>

这种方法的问题是我的组件在 <mat-accordion> 之间有一个额外的 html 元素。和 <mat-expansion-panel> ，这弄乱了 Accordion 的 css。

有没有办法让我的组件可以提供标题和内容？

    <mat-accordion>
      <div *ngFor="let item of items" >
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <!-- put item component header here->
            </mat-expansion-panel-header>

          <div>
            <!-- put item component content here->
          </div>
        </mat-expansion-panel>
      </div>
    </mat-accordion>

我已经阅读了 ng-content，但我认为这与我想要的相反，我不想将自定义内容推送到我的组件中，我想从我的组件中提取元素并将它们呈现在父级中。

我确实意识到我可以创建 2 个组件，item-header 和 item-content。但是，我真的很想将该登录名保留在一个组件中。

Answer 1

我遇到了同样的问题。 Pull Request is opened在这个主题上，但从未合并。
通过在下面添加此代码，我们可以稍微改进布局(边框半径)。为了简单起见，我们能做的最好的事情就是恢复 border-radius在第一个和最后一个面板的顶部和底部。

但是上一个面板的底部没有展开，而下一个面板的顶部没有展开就更困难了......

主要组件.html:

<mat-accordion class="custom-accordion">
  <item *ngFor="let item of items" [item]="item"></item>
</mat-accordion>

item.component.ts:

@Component({
  selector: 'app-item',
  template: `
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        Header Content
      </mat-expansion-panel-header>
      <div>
        Expandable content
      </div>
    </mat-expansion-panel>
  `,
  host: {
    'class': 'expansion-panel-wrapper',
    '[class.expanded]': 'expansionPanel && expansionPanel.expanded',
  }
})
export class ItemComponent {
  @ViewChild(MatExpansionPanel, { static: false }) expansionPanel;
  ...
}

在 style.scss 中:

.custom-accordion.mat-accordion {
  .expansion-panel-wrapper:first-of-type .mat-expansion-panel {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }

  & > :not(.expanded) .mat-expansion-panel {
    border-radius: 0;
  }

  & > .expansion-panel-wrapper:last-of-type > .mat-expansion-panel {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}