时间戳

首页 > 解决方案 > 在页面刷新时保持垫扩展面板的“扩展”状态

angular-material - 在页面刷新时保持垫扩展面板的“扩展”状态

问题描述

我在垫子扩展面板中有类别及其子类别。我想在页面刷新时保持活动类别的扩展。我附上参考代码。现场演示在这里https://budgetgrocery.com.au/products/flours。选择任何类别并刷新页面。所选类别的展开面板目前不会展开。

html模板

<mat-accordion class="example-headers-align">
<mat-expansion-panel *ngFor="let category of categories; let i = index">
    <mat-expansion-panel-header>
        <mat-panel-title style="cursor: pointer;"
            [ngClass]="{'horizontal-active-link':(isClicked[category.slug]) || ((listSandBox.getactiveCategoryID$|async) ==category.slug) || (activecategory==category.slug) }">
            <span>{{category.name}}</span>
        </mat-panel-title>
    </mat-expansion-panel-header>
    <p class="mat-sub-item" [routerLink]="['/products', subCategory.slug]" [routerLinkActive]="'primary'"
        [routerLinkActiveOptions]="{exact:true}"
        [ngClass]="{'horizontal-active-link':(isClicked[subCategory.slug]) || ((listSandBox.getactiveCategoryID$|async) ==subCategory.slug) || (activecategory==subCategory.slug) }"
        (click)="changeCategory(subCategory.slug,subCategory.slug, subCategory.name)"
        *ngFor="let subCategory of category.children; let i = index">{{subCategory.name}}</p>
    <p class="mat-sub-item" [routerLink]="['/products', category.slug]" [routerLinkActive]="'primary'"
        [routerLinkActiveOptions]="{exact:true}"
        [ngClass]="{'horizontal-active-link':(isClicked[category.slug]) || ((listSandBox.getactiveCategoryID$|async) ==category.slug) || (activecategory==category.slug) }"
        (click)="changeCategory(category.slug,category.slug, category.name)">Show All {{category.name}}
    </p>
</mat-expansion-panel>

组件文件

export class CategoryListComponent implements OnChanges, OnInit {
// decorator
@Input() categories;
@Input() categoryId;
@Input() isClicked = [];
@Output() change: EventEmitter<any> = new EventEmitter();
public activecategory: any;
public currentCategory: any;

constructor(
    public listSandBox: ListsSandbox) {
}

ngOnChanges() {
    this.currentCategory = this.categoryId;
    this.isClicked = [];
    this.isClicked[this.categoryId] = true;
}    
// initially calls subscribe method
ngOnInit() {
}

// emit the category id
public changeCategory(id, activeId, name) {
    this.isClicked = [];
    if (id === +this.currentCategory) {
        this.activecategory = '';
        this.listSandBox.removeActiveCategory();
        // this.change.emit('');
        this.change.emit(id);
    } else {
        this.isClicked[id] = true;
        this.currentCategory = id;
        this.activecategory = activeId;
        this.change.emit(id);
    }
}

我曾尝试使用扩展面板的 [expanded] 和 (opened) 方法，没有奏效。请提出解决方案。

标签： angular-materialangular7mat-expansion-panel

解决方案

当您刷新页面时，角度应用程序将被销毁并重建；任何状态都会丢失。

如果您希望状态在刷新后仍然存在，则需要将其保存在某个地方。

一种选择是将此状态保存到服务器并在页面加载时加载它。

另一种选择是将状态保存到 localStorage 并在页面加载时加载它。

然后，您可以使用保存的状态来初始化相应扩展面板的扩展输入。

推荐阅读