如何将扩展面板集成为重叠模式？

问题描述：

我正在使用<mat-expansion-panel>在窗体组件的UI上定义一些可折叠/可展开的区域。表格与@ ngrx/store集成在一起，问题是如果我在<mat-expansion-panel>上使用 [expanded]属性，展开面板将会展开，但动画不会被触发。这是一个错误还是预期的行为？如何将扩展面板集成为重叠模式？

如何在不破坏动画的情况下将展开面板集成到@ngrx中？ Here是我的仓库

答

我设法解决这个问题用一个指令

import { Directive, Optional, Input, HostListener, Output, EventEmitter } from '@angular/core'; 
import { MatExpansionPanel } from '@angular/material'; 

@Directive({selector: '[ngtExpansionPanelToggle]'}) 
export class ExpansionPanelToggleDirective { 
    @Input() 
    set isExpanded(state: boolean) { 
     this.setIsExpanded(state); 
    }; 

    @Output() onToggle: EventEmitter<boolean> = new EventEmitter<boolean>(); 

    constructor(@Optional() private _matExpansionPanel: MatExpansionPanel) { 
    } 

    @HostListener('click', ['$event']) 
    togglePanel(event) { 
     setTimeout(() => { 
      this.onToggle.emit(this.getExpandedState()); 
     }, 0); 
    } 

    private setIsExpanded(state: boolean) { 
     if (!this._matExpansionPanel) { 
      return; 
     } 

     let panelState = this._matExpansionPanel._getExpandedState(); 
     let newState = this.toPanelState(state); 

     if (newState === panelState) { 
      return; 
     } 

     this._matExpansionPanel.toggle(); 
    } 

    private toPanelState(state: boolean) { 
     return state 
      ? 'expanded' 
      : 'collapsed'; 
    } 

    private getExpandedState(): boolean { 
     let panelState = this._matExpansionPanel._getExpandedState() 

     if (panelState === 'expanded') { 
      return true; 
     } 

     return false; 
    } 
}

而且我重视这个指令的HTML这样

<mat-expansion-panel> 
       <mat-expansion-panel-header ngtExpansionPanelToggle 
              [isExpanded]="rowConfig?.isPanelOpened" 
              (onToggle)="handleTogglePanel(rowConfig, $event)"> 
        <mat-panel-title class="ngt-group-title"> 
         {{rowConfig.title}} 
        </mat-panel-title> 
        <mat-panel-description class="ngt-group-description"> 
         {{rowConfig.description}} 
        </mat-panel-description> 
       </mat-expansion-panel-header> 

       <ngt-form-elements *ngFor="let rowElements of rowConfig.elements" 
            [formName]="formStaticConfig.name" 
            [parentFormGroup]="ngFormGroup" 
            [outsideDataProviders]="outsideDataProviders" 
            [elements]="rowElements.elementsOnLine"> 
       </ngt-form-elements> 
      </mat-expansion-panel>

所以如果面板状态使用浏览器事件更新，我不会 rerendere视图，否则将从配置呈现。

如何将扩展面板集成为重叠模式？

相关推荐