我在Angular v6中使用Angular Material。我有两个手风琴,每个手风琴都包含一个扩展面板。打开另一个手风琴时如何关闭打开的手风琴?这两个手风琴现在都保持打开状态!
代码:
<!-- first accordion -->
<mat-accordion>
<mat-expansion-panel mat-list-item *ngIf="menuitem.type === 'sub'">
<mat-expansion-panel-header class="main-header">
<mat-panel-title>
<mat-icon class="list-icon">{{ menuitem.icon }}</mat-icon>
<span class="name">{{ menuitem.name }}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-nav-list *ngFor="let child of menuitem.children" routerLinkActive="open">
<a class="grand-menu" mat-list-item href="javascript:;" *ngIf="child.type === 'x'" [routerLink]="['/', menuitem.state, child.state ]">
<span class="grand">{{ child.name }}</span>
</a>
</mat-nav-list>
<mat-accordion open>
<mat-expansion-panel mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open" #example>
<mat-expansion-panel-header class="child" *ngIf="childitem.grand_children">
<mat-panel-title class="child-title">
<mat-icon class="arrow-icon" *ngIf="!example.expanded">keyboard_arrow_right</mat-icon>
<mat-icon *ngIf="example.expanded">keyboard_arrow_down</mat-icon>
{{ childitem.name }}
</mat-panel-title>
</mat-expansion-panel-header>
<mat-nav-list *ngFor="let child of childitem.grand_children" routerLinkActive="open">
<a class="grand-menu" mat-list-item href="javascript:;" *ngIf="childitem.type === 'parent'" [routerLink]="['/', menuitem.state, childitem.state, child.state ]">
<span class="grand">{{ child.name }}</span>
</a>
</mat-nav-list>
</mat-expansion-panel>
</mat-accordion>
</mat-expansion-panel>
</mat-accordion>
<!-- second accordion -->
<mat-accordion>
<mat-expansion-panel mat-list-item *ngIf="menuitem.type === 'sub1'">
<mat-expansion-panel-header class="main-header">
<mat-panel-title>
<mat-icon class="list-icon">{{ menuitem.icon }}</mat-icon>
<span class="name">{{ menuitem.name }}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-nav-list *ngFor="let child of menuitem.children" routerLinkActive="open">
<a class="grand-menu" mat-list-item href="javascript:;" *ngIf="child.type === 'x'" [routerLink]="['/', menuitem.state, child.state ]">
<span class="grand">{{ child.name }}</span>
</a>
</mat-nav-list>
</mat-expansion-panel>
</mat-accordion>
答案 0 :(得分:0)
使用mat-expansion-panel提供的打开和关闭的事件。
<mat-expansion-panel (closed)="isOpen = false" (opened)="isOpen = true">
[...]
</mat-expansion-panel>
在您的课程中创建一个公共变量,例如isOpen:
export class YourClass {
isOpen: boolean;
}
然后将isOpen
作为@Input()
传递到另一块Mat-expansion-panel
<mat-expansion-panel [expanded]="isOpen">
</mat-expansion-panel>
您必须在两个方向上都实现这一点,以使每个手风琴都能听对方的声音。