在 Angular 中构建一个带有“不再显示”复选框的模式

Question

我正在一个 Angular 项目（版本 16）中工作，我想构建一个带有“不再显示”复选框的对话框模式。
流程是这样的：

• 用户访问 Web 应用程序。在第一次连接时，会出现一个对话框模式，并带有“不再显示”复选框
• 用户阅读模态的内容并选择选中复选框
• 如果用户几分钟后访问网络应用程序，对话框模式将不再出现，因为浏览器将用户之前的选择存储为“不再显示”

我读了一些有关 LocalStorage 功能的内容，但不知道如何在 Angular 中构建它。

这是我目前的代码：

TS：

openDialog() {
  const dialogRef = this.dialog.open(ModalDialogComponent);

  dialogRef.afterClosed().subscribe(result => {
    console.log(`Dialog result: ${result}`);
  });
}

HTML（Angular-Material UI）：

<h2 mat-dialog-title>My dialog modal</h2>
<mat-dialog-content class="mat-typography">

<mat-tab-group>
    <mat-tab label="First">First</mat-tab>
    <mat-tab label="Second">Second</mat-tab>
</mat-tab-group>

<mat-checkbox class="example-margin">Do not show again</mat-checkbox>

</mat-dialog-content>

<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
</mat-dialog-actions>

你有什么想法来完成这个吗？
任何帮助将不胜感激，谢谢。

Answer 1

当用户单击“不再显示”复选框时，您可以将字符串值保存到本地存储

在打开本地存储中的模态之前检查该值是否已保存

代码示例：

openDialog() {
    if (localStorage.getItem('doNtShowAgain')) return;

    const dialogRef = this.dialog.open(ModalDialogComponent);

    dialogRef.afterClosed().subscribe(result => {
        if (result.doNtShow) { // change this to match the checkbox
            localStorage.setItem('doNtShowAgain', '1')
        }
        console.log(`Dialog result: ${result}`);
    });
}

Answer 2

您只需要知道如何访问 localStorage 吗？如果是这样的话，语法就是这样的：

设置本地存储项：

localStorage.setItem('show-dialog', 'no');

获取本地存储项目：

localStorage.getItem('show-dialog');

请记住，localStorage 项存储为字符串，因此您需要进行一些转换以将字符串转换为布尔值。像这样的东西：

showDialog: boolean;

ngOnInit(): void {
  this.showDialog = localStorage.getItem('show-dialog') == 'no' ? false : true;
}

首次加载时，如果 localStorage 项不存在，则会显示该对话框。如果用户单击该复选框，只需将 localStorage 项设置为“no”或类似的值即可。

Answer 3

在初始化时，您必须加载布尔值firstVisit，然后检查它是否为true，这意味着不需要显示对话框

您的主要组成部分：

  ngOnInit(): void {
    const firstVisit = localStorage.getItem('firstVisit');
    if(firstVisit){
      this.openDialog();
    }  
  }

如果用户点击接受，您还需要存储验证值

 openDialog() {
    const dialogRef = this.dialog.open(ModalDialogComponent);
  
    dialogRef.afterClosed().subscribe(result => {
        localStorage.setItem('firstVisit', result);
        console.log(`Dialog result: ${result}`);
    });
  }

基本上，您可以使用以下方式将数据存储在本地存储中：

localStorage.setItem('variableName', value);

使用以下方式从本地存储读取数据：

localStorage.getItem('variableName');