Angular 5中mat-accordion嵌套组件单面板展开问题求助

你遇到的核心问题是每个循环生成的Question组件都持有独立的mat-accordion实例，这些实例之间没有状态共享，所以点击不同面板时不会互相影响。要实现“同一时间仅展开一个面板”的需求，只需要把mat-accordion提升到父组件（QuestionList）中，让所有子面板共享同一个容器即可。

具体修改步骤 #

1. 重构Question组件，移除内部的mat-accordion #

原来的Question组件模板可能包含独立的mat-accordion，现在只保留mat-expansion-panel部分：

<!-- question.component.html -->
<mat-expansion-panel>
  <mat-expansion-panel-header>
    <h3>{{ question.title }}</h3>
  </mat-expansion-panel-header>
  <div class="question-content">
    {{ question.content }}
  </div>
</mat-expansion-panel>

对应的组件类只需要接收question数据输入即可：

// question.component.ts
import { Component, Input } from '@angular/core';
import { Question } from './your-question-interface';

@Component({
  selector: 'app-question',
  templateUrl: './question.component.html'
})
export class QuestionComponent {
  @Input() question!: Question;
}

2. 在QuestionList组件中统一管理mat-accordion #

把mat-accordion作为*ngFor的父容器，让所有app-question（即mat-expansion-panel）都归属于同一个折叠面板容器：

<!-- question-list.component.html -->
<mat-accordion [multi]="false">
  <app-question
    *ngFor="let question of questions"
    [question]="question"
  ></app-question>
</mat-accordion>

这里的[multi]="false"是关键（其实这是mat-accordion的默认值，显式写出来更清晰），它会强制容器内同一时间只能展开一个面板。

进阶：手动控制展开状态（可选） #

如果需要自定义展开逻辑（比如默认展开某个面板、通过外部按钮控制折叠/展开），可以在QuestionList中维护当前展开的面板ID，通过输入属性传递给子组件：

修改QuestionList组件类 #

// question-list.component.ts
import { Component } from '@angular/core';
import { Question } from './your-question-interface';

@Component({
  selector: 'app-question-list',
  templateUrl: './question-list.component.html'
})
export class QuestionListComponent {
  questions: Question[] = [...你的问题数据...];
  currentExpandedId: number | null = 1; // 默认展开ID为1的面板

  onPanelOpened(questionId: number) {
    this.currentExpandedId = questionId;
  }

  onPanelClosed() {
    this.currentExpandedId = null;
  }
}

修改QuestionList模板 #

<!-- question-list.component.html -->
<mat-accordion>
  <app-question
    *ngFor="let question of questions"
    [question]="question"
    [expanded]="currentExpandedId === question.id"
    (opened)="onPanelOpened(question.id)"
    (closed)="onPanelClosed()"
  ></app-question>
</mat-accordion>

修改Question组件接收expanded输入 #

// question.component.ts
@Input() expanded = false;

<!-- question.component.html -->
<mat-expansion-panel [expanded]="expanded">
  <!-- 内容不变 -->
</mat-expansion-panel>

这样就能完全自定义面板的展开状态了。

内容的提问来源于stack exchange，提问作者nitin