在重新加载后保持Angular下拉菜单打开

Question

我正在操作一个连接到SQL数据库的HTML/Typescript视图。任何时候更改SQL，整个网页都会重新加载。有几个下拉菜单，客户端希望在这些重新加载后保持打开状态，以避免重新打开的时间，只有当下拉菜单起源的按钮被点击时才关闭，或者菜单外的位置被点击。是否有办法确保打开的下拉菜单在重新加载后保持打开状态?

下面是一个这样的下拉列表的例子。

<mat-form-field>
<mat-label>Month</mat-label>
<mat-select formControlName="month" (selectionChange)="isStandardOrCurrentCost()">
<mat-option *ngFor="let month of getAvailableMonths()" [value]="month">{{month}}</mat-option>
</mat-select>
<control-messages [control]="form.get('month')"></control-messages>
</mat-form-field>

Answer 1

也许你可以考虑在本地存储中保存打开的下拉菜单的状态。每当页面重新加载时，将调用生命周期方法。使用像ngAfterViewInit或ngAfterContentInit这样的东西，你可以获得状态来查看哪些下拉菜单被激活了。然后模拟点击你的select元素。使用@ViewChild获取html元素和.nativeElement.click()来模拟点击。这不是最优的，在最好的情况下，您只会重新加载消耗SQL数据的组件，而不是整个页面。