Comment puis-je intégrer le panneau d'expansion dans un motif redux?

Question

J'utilise le <mat-expansion-panel> pour définir des zones pliantes/extensibles sur l'interface utilisateur d'un composant de formulaire. Le formulaire est intégré dans redux avec @ ngrx/store, le problème est que si j'utilise [expanded] propriété sur <mat-expansion-panel> le panneau d'expansion sera développé mais l'animation n'est pas déclenchée. Est-ce un bug ou le comportement attendu?

Comment puis-je intégrer le panneau d'extension dans @ngrx sans rompre les animations ? Here est mon dépôt

Answer 1

J'ai réussi à résoudre le problème en utilisant une directive

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; 
    } 
} 

Et j'attachais cette directive html comme celui-ci

<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> 

Donc, si l'état du panneau est mis à jour à l'aide d'un événement de navigateur, je ne redonnerai pas la vue, sinon il sera rendu à partir de la configuration.