Javascript 角度-使用ngFor创建手风琴菜单。需要在单击后自动关闭并打开另一个

角度材质手风琴组件在我的角度项目中

我正在使用ngFor循环查看

menuItems

的信息，并为每个项目创建一个新的扩展面板。我有两个组件，我将菜单项注入到包含面板的html中

现在，我有

在我的菜单（子模板）中：

{{menuItem}}
{{menuDescription}
{{option}}

在孩子的部分我有

expandedItem:string;


newExpandedItem(){
      this.expandedItem = this.menuItem;
    }

ts作为一个整体是

/**@标题基本菜单*/
@组成部分({
选择器：“confmenu”，
templateUrl:'./confmenu.component.html'，
样式URL:['./confmenu.component.scss']
})
导出类配置菜单实现OnInit、OnDestroy{
@Input（）菜单项：字符串；
expandedItem：字符串；
构造函数（）{}
ngOnInit（）{
//第一个菜单项
this.expandedItem=“firstItem”
}
恩贡德斯特罗（）{
//暂时空白
}
选择配置（值：字符串）{
this.selectedConfig=value；
}
newExpandedItem（）{
this.expandedItem=this.menuItem；
}
}

---

关于如何使面板在点击另一个面板时关闭，有什么想法吗？现在，单击另一个组件时，它们都保持打开状态。

一种方法是从

*ngFor

传递子组件级别的面板

索引。并在每个子组件中维护一个
currendex
属性。如果
index
与
currendex
匹配，则可以展开/折叠面板

儿童公司

export class ConfigurationMenu {

  @Input() index = -1;
  @Input() currIndex = -1;

  @Output() currIndexChanged : EventEmitter<number> = new EventEmitter<number>();

  onExpandCollapseChanged() {
    // if its already open then emit -1 and close the panel, else open the panel
    const i = this.index === this.currIndex ? -1 : this.index
    this.currIndexChanged.emit(i)
  }
}

父模板

<mat-accordion *ngFor="let menuItem of menuItems; let i=index">
  <confmenu [index]="i" [currIndex]="currIndex" menuItem={{menuItem}} 
   (currIndexChanged)="currIndex=$event"></confmenu>
</mat-accordion>



子模板

<mat-expansion-panel [expanded]= "index === currIndex" (opened)= "onExpandCollapseChanged()"
(closed)="onExpandCollapseChanged()">
    <mat-expansion-panel-header>
        <mat-panel-title>
.......


.......
通过使用服务，我实际上能够做到这一点。在我的服务中，我有：


    private expandedMenu = new BehaviorSubject('');
    openedMenu = this.expandedMenu.asObservable();




changeExpandedMenu(menu: string){
        this.expandedMenu.next(menu);
    }

在我的组件中，我有

this._menuService.openedMenu.subscribe(expandedMenu=> this.expandedMenu = expandedMenu);

onInit及其功能

    newExpandedItem(menuItem: string){
      this.expandedMenu= menuItem;
      this._menuService.changeExpandedMenu(this.expandedMenu);
    }

因此，在我的模板中，我只是这样做了

<mat-expansion-panel [expanded]= "expandedMenu===menuItem" (opened)="newExpandedItem(menuItem)">



谢谢大家的帮助
 您可以为Sameon创建stackblitz吗？一种方法是通过从
*ngFor
传递面板，在每个子组件处维护面板
索引。并维护
currendex
属性。从展开的组件发出索引，所有其他组件将订阅此事件并自动关闭，因为它们的
索引
与
当前索引
不匹配。您可以利用服务发出事件，否则父组件也会发出事件。@AmitChigadani真棒。我想我明白了。所以在我的父母中我做：`````在我的孩子中我做@Input（）索引：number；那么，我在我的子html模板中做什么呢？关于索引和菜单的困惑！使用服务也是一种更好的方法。
<mat-expansion-panel [expanded]= "expandedMenu===menuItem" (opened)="newExpandedItem(menuItem)">