如何在 Angular 16 中重新启动时重置 html 普通对话框

Question

我正在使用带有 mat-button-toggle-group 的 html 普通对话框元素，当我关闭对话框时，我需要重置选择。

<button (click)="fildialog.showModal()"><mat-icon class="filter-icon" >filter_list</mat-icon></button>

    <dialog id="fildialog" #fildialog>
        <div class="fil-container" >
            <div>
                <div> 
                    <mat-button-toggle-group #filter="matButtonToggleGroup" [value]="locaFilter"  multiple (change)="onValueChange(filter.value)" >
                        <mat-button-toggle class="first-toggle-element" value="fly">Fly</mat-button-toggle>
                        <mat-button-toggle class="second-toggle-element" value="route">On Route</mat-button-toggle>
                        <mat-button-toggle class="third-toggle-element" value="water">Water</mat-button-toggle>
                    </mat-button-toggle-group>
                </div>
            </div>
            <div class="command-buttons-container">
                <button id="closebutton" type="reset (click)="closeClicked()">Close</button>
                <button id="applybutton" (click)="applyClicked()">Apply</button>
            </div>
        </div>
    </dialog>

在打字稿中，我将在调用对话框的 apply 和 close 方法之前处理一些逻辑。 当我重新打开对话框时，我只需要以前应用的选择。假设当用户第一次打开时，我选择了“飞行”选项，然后用户选择所有选项并单击关闭按钮并再次打开，它必须仅显示所选的“飞行”选项。

Answer 1

所以，如果我理解正确，那么保存用户设置的设置时会遇到问题。您有一些选择：

内存（RAM）

构建一个简单的 Angular

Service

并保留设置

// Service
...
public mySettings: {all: boolean, flight: boolean} = { all: true, flight: false};

setSettings(all: boolean, flight: boolean) {
  this.mySettings = { all, flight }
}

getSettings() {
  return mySettings;
}

// Component
constructor(private myService: MyService) {}

openDialog() {
  ....
  dialog.settings = this.myService.getSettings();
  // your logic..
  // dialog closed
  this.myService.setSettings(dialog.settings);
}

如果浏览器刷新，也使用 localStorage 来保存数据

同样的场景。您也可以使用服务。

// Service
setSettings(all: boolean, flight: boolean) {
  localStorage.setItem("data", JSON.stringify({ all, flight });
}

getSettings() {
  return JSON.parse(localStorage.getItem("data"));
}

// Component same like before

第三种方法是使用数据库和后端

在这里，您可以使用 Angulars 发送 http 请求

httpClient

并将设置保存在数据库中。每次加载带有对话框的组件时加载它（

ngOnInit

作为示例）