angular - 如何以 redux 模式集成扩展面板？

Question

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

如何在不破坏动画的情况下将扩展面板集成到 @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>

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