Angular 16实现带「不再显示」复选框的模态框方案求助

需求概述 #

• 首次访问Web应用时，弹出带有「不再显示」复选框的模态框
• 用户可勾选复选框，关闭对话框后浏览器存储该选择
• 后续访问应用时，若已存储「不再显示」的选择，则模态框不再弹出

现有代码 #

TS代码（主组件） #

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

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

HTML代码（模态框组件，Angular Material） #

<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>

实现步骤及代码修改 #

1. 改造模态框组件，绑定复选框状态 #

在ModalDialogComponent的TS文件中添加复选框双向绑定变量，并在HTML中关联该变量：

模态框组件TS代码

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-modal-dialog',
  templateUrl: './modal-dialog.component.html',
  styleUrls: ['./modal-dialog.component.css']
})
export class ModalDialogComponent {
  // 绑定「不再显示」复选框的状态
  doNotShowAgain = false;

  constructor(public dialogRef: MatDialogRef<ModalDialogComponent>) {}
}

模态框组件HTML代码修改

将复选框与变量双向绑定，并修改关闭按钮的返回值为复选框状态：

<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" [(ngModel)]="doNotShowAgain">Do not show again</mat-checkbox>

</mat-dialog-content>

<mat-dialog-actions align="end">
  <!-- 取消按钮返回false，不存储选择 -->
  <button mat-button [mat-dialog-close]="false">Cancel</button>
  <!-- 确认按钮返回复选框状态 -->
  <button mat-button [mat-dialog-close]="doNotShowAgain" cdkFocusInitial>Install</button>
</mat-dialog-actions>

2. 主组件逻辑：读取本地存储并控制对话框显示 #

在主组件中，先检查LocalStorage中是否存在「不再显示」标记，仅当标记不存在或为false时才打开对话框；对话框关闭后，根据返回值存储用户选择：

主组件TS代码修改

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ModalDialogComponent } from './modal-dialog/modal-dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private dialog: MatDialog) {}

  ngOnInit() {
    // 组件初始化时检查本地存储，决定是否弹出对话框
    this.checkAndOpenDialog();
  }

  checkAndOpenDialog() {
    // LocalStorage存储的是字符串，需转换为布尔值判断
    const doNotShow = localStorage.getItem('doNotShowDialog') === 'true';
    
    if (!doNotShow) {
      this.openDialog();
    }
  }

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

    dialogRef.afterClosed().subscribe(result => {
      // 若用户勾选「不再显示」，将标记存入LocalStorage
      if (result) {
        localStorage.setItem('doNotShowDialog', 'true');
      }
    });
  }
}

3. 必要配置 #

确保已在模块中导入FormsModule，否则[(ngModel)]双向绑定无法生效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Julien