Wie kann ich das Expansionspanel im Redux-Muster integrieren?

Question

Ich verwende die <mat-expansion-panel>, um einige zusammenklappbare/erweiterbare Zonen auf der Benutzeroberfläche einer Formularkomponente zu definieren. Das Formular ist in redux mit @ ngrx/store integriert, das Problem ist, dass wenn ich [expanded] -Eigenschaft auf <mat-expansion-panel> das Erweiterungsfeld wird erweitert, aber die Animation wird nicht ausgelöst. Ist das ein Fehler oder das erwartete Verhalten?

Wie kann ich das Erweiterungsfeld in @ngrx integrieren, ohne die Animationen zu zerstören? Here ist mein Repository

Answer 1

ich das Problem mit einer Richtlinie

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

Und ich angebracht, diese Richtlinie html wie diese

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

zu beheben verwaltet

Also wenn der Panel-Zustand mit einem Browser-Ereignis aktualisiert wird, werde ich nicht die Ansicht rendere, sonst wird von der Konfiguration gerendert.