如何將擴展面板集成爲重疊模式？

Question

我正在使用<mat-expansion-panel>在窗體組件的UI上定義一些可摺疊/可展開的區域。表格 與@ ngrx/store集成在一起，問題是如果我在<mat-expansion-panel>上使用 [expanded]屬性，展開面板 將會展開，但動畫不會被觸發。這是一個錯誤還是 預期的行爲？

如何在不破壞 動畫的情況下將展開面板集成到@ngrx中？ Here是我的倉庫

Answer 1

我設法解決這個問題用一個指令

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視圖，否則將從配置呈現。