如何将扩展窗格集成到redux模式中？

Question

我使用<mat-expansion-panel>在表单组件的UI上定义了一些可折叠/可扩展的区域。表单与@ngrx/store集成在redux中，问题是如果我在<mat-expansion-panel>上使用展开属性，扩展面板将被展开，但动画不会被触发。这是一个bug还是预期的行为？ 如何在@ngrx中集成扩展面板而不破坏动画？这里是我的存储库。

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>

因此，如果使用浏览器事件更新面板状态，我将不会重新发送视图，否则将从配置中呈现。